/*! build: b4b2031-dirty @ 2026-11-11T21:57:51.867Z */
@layer base, brand, utility;
/*
 * Travelex distributable stylesheet.
 *
 * This is the only source file the build targets. The layer order must be
 * declared before imports so it remains stable regardless of source order.
 */

@layer base.reset {

    html {
        font-size: 16px;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    html *,
    html *:after,
    html *:before {
        box-sizing: inherit;
    }

    * {
        background-color: transparent;
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0;
        list-style: none;
    }

    body {
        font-size: 1rem;
    }

    fieldset {
        border: 0;
    }

    /* Base link, button, paragraph, and list defaults. Lives in base.reset
   (not brand) so any component rule in base.components — a later layer —
   always wins regardless of selector specificity. If these lived in the
   brand layer instead (which comes after base.components), brand's rule
   would always beat component rules no matter how specific they were,
   since cascade layers ignore specificity across layers. */
    a {
        color: var(--link-color, #0645ad);
        text-decoration: underline;
        word-break: break-word;
    }

    a:hover {
        color: var(--link-hover-color, #0b0080);
        text-decoration: none;
    }

    a:focus-visible,
    button:focus-visible {
        color: var(--link-hover-color, #0b0080);
        text-decoration: none;
        outline: 2px solid var(--link-focus-outline-color, #0b0080);
        outline-offset: 2px;
        border-radius: var(--link-focus-radius, 2px);
    }

    button {
        cursor: pointer;
        font-family: inherit
            /* fixes odd bug w being overwritten by browser agentstylesheet */
        ;
    }

    a,
    button {
        transition: background-color 0.3s ease-in;
    }

    p {
        padding-block-end: var(--paragraph-spacing, 16px);
    }

    ol {
        padding-inline-start: 40px;
    }

    ol>li {
        list-style-type: decimal;
    }

    ol ol>li {
        list-style-type: lower-alpha;
    }

    ol ol ol>li {
        list-style-type: lower-roman;
    }

    ul {
        padding-inline-start: 40px;
        line-height: 1.33;
    }

    ul>li {
        list-style-type: disc;
    }

    ul li::marker {
        color: var(--list-bullet-color, #000);
        font-size: 16px;
        font-weight: 700;
    }

    ol>li,
    ul>li {
        padding-block-end: var(--paragraph-spacing, 16px);
    }

    @font-face {
        font-family: "Material Symbols Rounded";
        font-style: normal;
        font-weight: 100 700;
        font-display: block;
        src: url("https://fonts.gstatic.com/s/materialsymbolsrounded/v375/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2") format("woff2");
    }

    .material-symbols-rounded {
        font-family: "Material Symbols Rounded";
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        font-variation-settings:
            "FILL" 0,
            "wght" 400;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .sr-only-focusable:active,
    .sr-only-focusable:focus {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
}

@layer base.components {

    .pull-right>.dropdown-menu {
        right: 0;
        left: auto;
    }

    .cmp-image__image {
        width: 100%;
    }

    .core-form-control {
        display: block;
        width: 100%;
    }

    span.rte-wrap {
        display: inline-block;
    }

    .text>.cmp-text .text-left {
        text-align: left;
    }

    .text>.cmp-text .text-center {
        text-align: center;
    }

    .text>.cmp-text .text-right {
        text-align: right;
    }

    @media screen and (min-width: 576px) {
        .text>.cmp-text .text-sm-left {
            text-align: left;
        }

        .text>.cmp-text .text-sm-center {
            text-align: center;
        }

        .text>.cmp-text .text-sm-right {
            text-align: right;
        }
    }

    @media screen and (min-width: 768px) {
        .text>.cmp-text .text-md-left {
            text-align: left;
        }

        .text>.cmp-text .text-md-center {
            text-align: center;
        }

        .text>.cmp-text .text-md-right {
            text-align: right;
        }
    }

    li.dropdown>a>img {
        display: flex;
        margin: 0 5px 0 0;
    }

    img.cmp-image__image {
        width: initial;
    }

    div.xf-content-height {
        margin: initial;
        min-height: initial;
        margin: 0;
    }

    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
        margin: 0 auto;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    div.image .cmp-image__image {
        display: inline-block;
    }

    .aem-AuthorLayer-Edit .hidden.cq-Editable-dom {
        display: block !important;
    }

    .personalization .xf-selector div.image {
        margin-bottom: 0;
        overflow: initial;
    }

    .refundWrap {
        margin-left: 150px;
    }

    .calculaterefund_btn:focus {
        outline: 0;
        border-radius: 30px;
    }

    .cancel_btn {
        width: 127px;
        height: 52px;
        color: #001871;
        border: 1px solid #001871;
        border-radius: 30px;
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
    }

    .cancel_btn2:focus {
        outline: 0;
        border-radius: 30px;
    }

    .cancel_btn:hover {
        background-color: #001871;
        color: #fff;
    }

    .cancel_btn:focus {
        outline: 0;
        border-radius: 30px;
    }

    #pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: var(--size-5);
    }

    #pagination #paginationNumbers {
        margin-left: var(--size-1);
        margin-right: var(--size-1);
    }

    #pagination .numberButton {
        height: var(--size-6);
        line-height: var(--size-6);
        width: var(--size-6);
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        border: var(--border-size-1) solid var(--color-blue-3, #1352de);
        background-color: var(--color-white-1, #fff);
        color: var(--color-blue-3, #1352de);
        margin: 0 5px;
    }

    #pagination .numberButton:hover {
        background-color: var(--color-blue-3, #1352de);
        color: #fff;
        transition: 0.7s;
    }

    #pagination .numberButton.activePage {
        background-color: var(--color-blue-4, #001871);
        border: var(--border-size-1) solid var(--color-blue-4, #001871);
        color: #fff;
    }

    #pagination .loadingPagination {
        pointer-events: none;
        background-color: var(--color-blue-3, #1352de);
        color: #fff;
        height: var(--size-6) !important;
        line-height: var(--size-6) !important;
        width: var(--size-6) !important;
        border-radius: 50% !important;
        text-align: center;
        cursor: pointer;
        margin: 0 5px;
    }

    #policySearchTable table tr {
        border-bottom: var(--border-size-1) solid #cadbf2;
    }

    #policySearchTable .headerRow {
        position: relative;
        white-space: nowrap;
        text-align: left;
    }

    button[name="previousPage"].searchPolicyButtonDisabled,
    button[name="nextPageButton"].searchPolicyButtonDisabled {
        background-color: var(--color-gray-3, #cccccc);
        cursor: not-allowed;
        pointer-events: none;
    }

    #policySearchTable table tr:nth-child(even) {
        background-color: #f6f9fd;
    }

    #policySearchTable table {
        border-collapse: collapse;
        font-size: var(--font-size-3);
    }

    #policySearchTable table tr th,
    #policySearchTable table tr td {
        padding: var(--size-1);
    }

    #policySearchTable .policyLink button {
        text-decoration: underline;
        color: var(--color-blue-3, #1352de);
    }

    #policySearchTable .down-arrow {
        cursor: pointer;
    }

    .fade {
        opacity: 0;
        transition: opacity 0.15s linear;
    }

    .fade.in {
        opacity: 1;
    }

    .collapse {
        display: none;
    }

    .collapse.in {
        display: block;
    }

    tr.collapse.in {
        display: table-row;
    }

    tbody.collapse.in {
        display: table-row-group;
    }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        transition-property: height, visibility;
        transition-duration: 0.35s;
        transition-timing-function: ease;
    }

    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid \9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    .dropup,
    .dropdown {
        position: relative;
    }

    .dropdown-toggle:focus {
        outline: 0;
    }

    .dropdown-menu {
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    }

    @media (min-width: 768px) {
        .dropdown-menu {
            position: absolute;
            float: left;
        }
    }

    .dropdown-menu.pull-right {
        right: 0;
        left: auto;
    }

    .dropdown-menu .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        color: #262626;
        text-decoration: none;
        background-color: #f5f5f5;
    }

    .dropdown-menu>.active>a,
    .dropdown-menu>.active>a:hover,
    .dropdown-menu>.active>a:focus {
        color: #fff;
        text-decoration: none;
        background-color: #337ab7;
        outline: 0;
    }

    .dropdown-menu>.disabled>a,
    .dropdown-menu>.disabled>a:hover,
    .dropdown-menu>.disabled>a:focus {
        color: #777;
    }

    .dropdown-menu>.disabled>a:hover,
    .dropdown-menu>.disabled>a:focus {
        text-decoration: none;
        cursor: not-allowed;
        background-color: transparent;
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }

    .open>.dropdown-menu {
        display: block;
    }

    .open>a {
        outline: 0;
    }

    .dropdown-menu-right {
        right: 0;
        left: auto;
    }

    .dropdown-menu-left {
        right: auto;
        left: 0;
    }

    .dropdown-header {
        display: block;
        padding: 3px 20px;
        line-height: 1.42857143;
        color: #777;
        white-space: nowrap;
    }

    .dropdown-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 990;
    }

    .dropup .caret,
    .navbar-fixed-bottom .dropdown .caret {
        content: "";
        border-top: 0;
        border-bottom: 4px dashed;
        border-bottom: 4px solid \9;
    }

    .dropup .dropdown-menu,
    .navbar-fixed-bottom .dropdown .dropdown-menu {
        top: auto;
        bottom: 100%;
        margin-bottom: 2px;
    }

    @media (min-width: 768px) {
        .navbar-right .dropdown-menu {
            right: 0;
            left: auto;
        }

        .navbar-right .dropdown-menu-left {
            right: auto;
            left: 0;
        }
    }

    #onetrust-pc-sdk .ot-cat-item>button,
    #onetrust-pc-sdk .ot-acc-cntr>button,
    #onetrust-pc-sdk li>button {
        position: absolute;
        cursor: pointer;
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
        z-index: 1;
        max-width: none;
        border: none;
    }

    #onetrust-pc-sdk .ot-cat-item>button[aria-expanded=false]~.ot-acc-txt,
    #onetrust-pc-sdk .ot-acc-cntr>button[aria-expanded=false]~.ot-acc-txt,
    #onetrust-pc-sdk li>button[aria-expanded=false]~.ot-acc-txt {
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        width: 100%;
        transition: .25s ease-out;
        display: none;
    }

    #onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-grpcntr.ot-acc-txt {
        padding-bottom: 10px;
        overflow: auto;
    }

    #onetrust-pc-sdk.otPcCenter>div[role=dialog] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
}
/*
 * Manifest for core component styles. Each imported file is a plain partial;
 * the `layer()` condition here assigns them to `base.components` — the files
 * themselves don't self-wrap in @layer.
 */

/* @import url("./carousel.css") layer(base.components); */

@layer base.components{

/* Tabs component styles moved from base.css */

.cmp-tabs__tablist {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
}

.cmp-tabs__tab {
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.cmp-tabs__tab--active {
    border-color: inherit;
}

.cmp-tabs__tabpanel {
    display: none;
}

.cmp-tabs__tabpanel--active {
    display: block;
}

/* Detailed tab visuals and token fallbacks */
ol.cmp-tabs__tablist {
    padding: var(--tabs-padding, 30px 30px 0 30px);
}

.cmp-tabs__tab {
    border-bottom: 3px solid transparent;
    margin-bottom: var(--tabs-tab-margin-bottom, 17px);
    color: var(--tabs-tab-color, #1352de);
    font-weight: var(--tabs-tab-font-weight, 600);
    padding: var(--tabs-tab-padding, 10px 0 5px 0);
    margin-right: var(--tabs-tab-margin-right, 30px);
}

.cmp-tabs__tab:hover {
    border-color: var(--tabs-tab-color, #1352de);
}

.cmp-tabs__tab:last-of-type {
    margin-right: 0;
}

.cmp-tabs__tab.cmp-tabs__tab--active {
    border-color: var(--tabs-tab-active-color, #001871);
    color: var(--tabs-tab-active-color, #001871);
}

.cmp-tabs__tabpanel {
    border-top: 1px solid var(--tabs-tabpanel-border-color, #dcdcdc);
    padding: var(--tabs-tabpanel-padding, 30px 30px 50px 30px);
}

@media (width < 990px) {
    .cmp-tabs.has-plan-dropdown .cmp-tabs__tablist {
        display: none;
    }
}

@media (width >= 990px) {
    .cmp-tabs.has-plan-dropdown .cmp-tabs__tablist {
        display: flex;
    }

    .plan-tabs-dropdown {
        display: none;
    }
}

.plan-tabs-dropdown {
    position: relative;
    width: 100%;
    min-width: 0;
}

.plan-tabs-dropdown__trigger {
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 14px 16px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.plan-tabs-dropdown__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.plan-tabs-dropdown__trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.plan-tabs-dropdown__list {
    position: absolute;
    z-index: 200;
    inset-inline: 0;
    top: 100%;
    box-sizing: border-box;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0;
}

.plan-tabs-dropdown__list[hidden] {
    display: none;
}

.plan-tabs-dropdown__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 14px 16px;
    font: inherit;
    overflow-wrap: anywhere;
    cursor: pointer;
}
}

@layer base.components{

/* Accordion component styles moved from base.css */

.cmp-accordion {
    border-top: 1px solid var(--accordion-border-color, #1352de);
}

.cmp-accordion__item {
    padding: var(--accordion-item-padding-y, 30px) 0;
    border-bottom: 1px solid var(--accordion-border-color, #1352de);
}

.cmp-accordion .cmp-accordion__header {
    margin: 0;
}

.cmp-accordion .cmp-accordion__button {
    font-size: var(--accordion-button-font-size, 1.25rem);
    color: var(--accordion-button-color, #1352de);
    font-weight: var(--accordion-button-font-weight, 600);
    cursor: pointer;
    position: relative;
    padding-right: 60px;
}

.accordion .cmp-accordion__button::before {
    position: absolute;
    right: 20px;
    top: 4px;
    content: "\eaca";
    font-family: Hinge Icons;
    color: var(--accordion-icon-color, inherit);
}

.accordion .cmp-accordion__button.cmp-accordion__button--expanded::before {
    content: "\eacc";
}

.cmp-accordion .cmp-accordion__panel {
    padding-top: var(--accordion-panel-padding-top, 30px);
}

@media (width >= 992px) {
    .cmp-accordion button[data-disable-desktop-collapse="true"] {
        cursor: default !important;
    }

    button[data-disable-desktop-collapse="true"] .cmp-accordion__icon {
        display: none;
    }
}
}
/* @import url("./legacy_utilityPrimaryNav.css") layer(base.components); */
@layer base.components{
/* Repeatable Container Add/Remove Buttons */
.container .cmp-container .cmp-repeatable-container-buttons {
    display: flex;
    gap: 15px;
    justify-content: end;
}

.container .cmp-container .cmp-repeatable-container-buttons button {
    font-size: 1rem;
    display: flex;
    color: var(--repeatable-btn-color, #1352de);
}

.container
    .cmp-container
    .cmp-repeatable-container-buttons
    .cmp-repeatable-container--removeButton:before {
    content: "";
    border-radius: 20px;
    background: #fff
        url(/content/dam/config/branding-stylesheets/master/icons/subtract-icon.svg)
        no-repeat;
}

.container
    .cmp-container
    .cmp-repeatable-container-buttons
    .cmp-repeatable-container--addButton:before {
    content: "";
    border-radius: 20px;
    background: #fff
        url(/content/dam/config/branding-stylesheets/master/icons/add-icon.svg)
        no-repeat;
}

.container .cmp-container .cmp-repeatable-container-buttons button:before {
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    border-radius: 0;
    width: 26px;
    height: 26px;
}

/* Zebra Table Row Colors */
.zebraTable > .cmp-container > :nth-child(even) {
    background-color: var(--table-row-color-even);
}

.zebraTable > .cmp-container > :nth-child(odd) {
    background-color: var(--table-row-color-odd);
}
}
@layer base.components{

/* Datepicker component styles moved from base.css */

.fldErr input.hasDatepicker {
    background: var(--field-error-bg, #fbe7eb)
        url(/content/dam/config/branding-stylesheets/master/icons/calendar-red-error.svg)
        no-repeat;
    background-position: right 20px center;
    background-size: 24px;
}

input[readonly].datePickerIcon,
input[disabled].datePickerIcon {
    border-color: var(--color-gray-6, #74869f);
    color: var(--color-gray-6, #74869f);
    cursor: not-allowed !important;
    background: var(--color-gray-2, #f5f5f5)
        url(/content/dam/config/branding-stylesheets/master/icons/calendar-gray-disabled.svg)
        no-repeat;
    background-position: right 20px center;
}

.ui-datepicker {
    border: 1px solid var(--datepicker-border-color, #74869f);
    background-color: white;
}

.ui-datepicker .ui-datepicker-header {
    background-color: white;
    border: 0;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
    height: 19px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon {
    background: 0;
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before {
    font-family: Hinge Icons;
    font-size: 1rem;
    position: absolute;
    text-indent: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--datepicker-accent-color, #1352de);
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
    font-weight: 600;
    border: 0;
    background-color: transparent;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before {
    content: "\eac9";
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before {
    content: "\eacb";
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    display: flex;
    height: 1.8em;
    color: var(--datepicker-primary-color, #001871);
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    cursor: pointer;
    margin: 0 15px;
    box-sizing: border-box;
    font-size: 0.778rem;
}

.ui-datepicker
    .ui-datepicker-header
    .ui-datepicker-title
    select:nth-of-type(1) {
    margin: 0 10px 0 0;
}

.ui-datepicker
    .ui-datepicker-header
    .ui-datepicker-title
    select:nth-of-type(2) {
    margin: 0 0 0 10px;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    border: 0;
    text-align: center;
    cursor: pointer;
    color: var(--datepicker-primary-color, #001871);
    background-color: transparent;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover {
    background-color: var(--datepicker-primary-color, #001871);
    color: #fff;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active {
    background-color: var(--datepicker-accent-color, #1352de);
    color: #fff;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight {
    background-color: var(--datepicker-highlight-bg, #a1baf2);
}

.ui-datepicker .ui-datepicker-calendar thead span {
    color: var(--datepicker-accent-color, #1352de);
}

input.hasDatepicker {
    background: #fff
        url(/content/dam/config/branding-stylesheets/master/icons/calendar-datepicker.svg)
        no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}

input.datePickerIcon {
    background: #fff
        url(/content/dam/config/branding-stylesheets/master/icons/calendar-datepicker.svg)
        no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}

.ui-widget-header select {
    padding: 4px 8px;
    background-position: right center;
}

.ui-datepicker.ui-widget input,
.ui-datepicker.ui-widget select,
.ui-datepicker.ui-widget textarea,
.ui-datepicker.ui-widget button,
.ui-datepicker.ui-widget {
    font-family: inherit;
}

.ui-widget-header select {
    background-position: right 10px center;
}
}
@layer base.components{

.help-message-svg .info-icon-question-circle,
.help-message-svg .info-icon-i-circle {
    fill: var(--tooltip-icon-circle-color, blue);
}

.help-message-svg .info-icon-question-fill,
.help-message-svg .info-icon-i-fill {
    fill: var(--tooltip-icon-glyph-color, white);
}

.help-message-svg .info-icon-outer-circle {
    fill: var(--tooltip-icon-outer-circle-color, white);
}

.cmp-title:has(.help-message-custom-title-content) {
    display: grid;
    gap: 0.5rem;
    align-items: baseline;
    grid-template-columns: auto 1fr;
}

.cmp-text:has(.info-tooltip-button) {
    display: flex;
    gap: var(--size-1);
    flex-wrap: wrap;
}

.info-tooltip-button {
    border-radius: 50% !important;
    height: 18px;
    width: 18px;
}

.info-tooltip-button .help-message-svg {
    width: inherit;
    height: inherit;
    cursor: pointer;
}

.modal.show {
    display: flex !important;
    place-items: center !important;
}

#custom-help-message-tooltip-modal .modal-content {
    background: var(--tooltip-modal-bg, white);
    border-radius: 8px;
    padding: var(--size-3);
    max-width: var(--site-width-size-1);
    margin: auto;
    max-height: 440px;
    overflow: auto;
}

#custom-help-message-tooltip-modal .tooltip-dismiss {
    font-size: 1.6rem;
}

#custom-help-message-tooltip-modal .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--size-3);
    gap: 15px;
}

#custom-help-message-tooltip-modal .tooltip-header p {
    padding: 0;
    font-size: var(--font-size-6);
}

#custom-help-message-tooltip-modal .tooltip-dismiss {
    width: 25px;
}
}
@layer base.components{

.customErr,
.not_valid,
.regexErr {
    color: var(--field-error-color, #e81944);
    padding: 10px 0;
}

.fldErr input,
.fldErr select,
.fldErr textarea,
.fldErr input[type="checkbox"],
.fldErr input[type="radio"] {
    border-color: var(--field-error-border-color, #e81944);
    background-color: var(--field-error-bg, #fbe7eb);
    color: var(--field-error-color, #e81944);
}

.fldErr input::placeholder,
.fldErr select::placeholder,
.fldErr textbox::placeholder,
.fldErr select:invalid {
    color: var(--field-error-color, #e81944);
}

.fldErr .customErr,
.fldErr .not_valid,
.customErr,
.not_valid,
.Tokenize .cmp-tokenize-frame .tokenErr {
    display: grid;
    grid-template-columns: var(--field-error-icon-size, 1.5rem) 12fr;
    align-items: center;
    gap: var(--field-error-gap, 10px);
    padding: var(--field-error-panel-padding, 10px);
    margin-top: var(--field-error-margin-top, 10px);
    font-size: var(--field-error-panel-font-size, 0.889rem);
    color: var(--field-error-panel-color, #e81944);
    background: var(--field-error-panel-bg, #fbe7eb);
    border-radius: var(--field-error-panel-radius, 8px);
}

.fldErr .customErr:before,
.fldErr .not_valid:before,
.customErr:before,
.not_valid:before,
.Tokenize .cmp-tokenize-frame .tokenErr:before {
    content: '\e000';
    display: inline-block;
    margin: 0;
    font-family: "Material Symbols Rounded";
    text-align: center;
}

.Tokenize .cmp-tokenize-frame .tokenErr p {
    margin: 0;
    padding: 0;
}

#api-error {
    display: block;
    padding: var(--api-error-padding, 20px);
    border: 1px solid var(--api-error-accent-color, #e81944);
    border-radius: var(--api-error-radius, 8px);
    margin: var(--api-error-margin, 20px 0);
    background: var(--api-error-bg, #fbe7eb);
    color: var(--api-error-accent-color, #e81944);
}

#api-error:empty {
    display: none;
}
}
@layer base.components{

.guidePanelNode .cmp-tokenize-frame {
    margin: 4px 10px 22px 10px;
}

.Tokenize .field.iframe-element {
    max-height: 64px;
}

.Tokenize iframe {
    max-height: 64px;
}
}
@layer base.components{

.loader {
    border: 5px solid #fff;
    border-radius: 50%;
    border-top: 5px solid transparent;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    position: fixed;
    opacity: 0.9;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 50%;
}

.spinnerBg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    right: 0;
    bottom: 0;
    z-index: 999999999;
    background-color: #000;
}
}
@layer base.components{

.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none !important;
    place-items: center !important;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
    transform: translate(0, 0);
}

.modal.fade.show {
    opacity: 1;
}

.modal-backdrop.fade.show {
    opacity: 0.5;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
    margin-top: -2px;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
    margin-left: 0;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .modal-content {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

#modal-link-tgfoundation-button-dynamic .modal-dialog {
    display: flex;
    justify-content: center;
    width: var(--site-width-size-3);
}

@media screen and (max-width: 768px) {
    #modal-link-tgfoundation-button-dynamic .modal-dialog {
        width: 100%;
    }
}

#modal-link-tgfoundation-button-dynamic .modal-content {
    flex-grow: 1;
    height: 70vh;
    display: flex;
    flex-direction: column;
    place-items: flex-end;
}

#modal-link-tgfoundation-button-dynamic button.fancybox-close-small {
    width: 40px;
}

#modal-link-tgfoundation-iframe {
    height: 100%;
}
}
@layer base.components{

.cmp-breadcrumb {
    font-size: var(--breadcrumb-font-size, 14px);
    padding: 12px 0;
}

.cmp-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp-breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--breadcrumb-color, #6b7280);
}

/* Chevron separator between items (not before the first) */
.cmp-breadcrumb__item + .cmp-breadcrumb__item::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    border-top: 1.5px solid var(--breadcrumb-separator-color, #9ca3af);
    border-right: 1.5px solid var(--breadcrumb-separator-color, #9ca3af);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.cmp-breadcrumb__item-link {
    color: var(--breadcrumb-color, #6b7280);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cmp-breadcrumb__item-link:hover {
    color: var(--breadcrumb-link-hover-color, #003d6e);
    text-decoration: underline;
}

.cmp-breadcrumb__item-link:focus-visible {
    outline: 2px solid var(--breadcrumb-focus-outline-color, #0076be);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Current page ? no link, styled as the emphasized end of the trail */
.cmp-breadcrumb__item--active {
    color: var(--breadcrumb-active-color, #1a1a1a);
    font-weight: var(--breadcrumb-active-font-weight, 600);
}

/* Optional: truncate long labels gracefully on narrow screens */
@media (max-width: 480px) {
    .cmp-breadcrumb__item-link span,
    .cmp-breadcrumb__item--active span {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }
}
}
@layer base.components{

#progressNav ol {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: step;
}

#progressNav li {
    flex: 1;
    text-align: center;
    position: relative;
    counter-increment: step;
    font-weight: var(--progress-nav-font-weight, 600);
    list-style: none;
    padding: 0;
}

#progressNav li a {
    text-decoration: none;
}

/* Step circles */
#progressNav li::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--progress-nav-circle-size, 2.5rem);
    height: var(--progress-nav-circle-size, 2.5rem);
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: var(--progress-nav-track-color, #ebebeb);
    color: var(--progress-nav-track-text-color, #adadad);
    font-weight: bold;
    position: relative;
    z-index: 2;
}

/* Connecting line */
#progressNav li::after,
#progressNav li > .step-progress-fill {
    content: "";
    position: absolute;
    top: calc(var(--progress-nav-circle-size, 2.5rem) / 2);
    left: 50%;
    width: 100%;
    height: 4px;
    background: var(--progress-nav-track-color, #ebebeb);
}
#progressNav li:last-child::after {
    display: none;
}

/* Substep progress overlays the outgoing connector beneath the circles. */
#progressNav li > .step-progress-fill {
    display: none;
    background: var(--progress-nav-active-color, #627dbe);
    pointer-events: none;
    z-index: 1;
    transform: scaleX(clamp(0, var(--step-progress, 0), 1));
    transform-origin: left center;
}

#progressNav li.current.current--partial:not(:last-child) > .step-progress-fill {
    display: block;
}

/* Current step */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 119, 204, 0);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.2);
    }
}
#progressNav li.current::before {
    background: var(--progress-nav-active-color, #627dbe);
    color: var(--progress-nav-active-text-color, #fff);
    animation: pulse-shadow 2s infinite;
}
/* Completed steps (auto via :has) */
#progressNav li:not(.current):has(~ .current)::before {
    background: var(--progress-nav-active-color, #627dbe);
    color: var(--progress-nav-active-text-color, #fff);
    content: "\ea54";
    font-family: "Hinge Icons";
}
#progressNav li:not(.current):has(~ .current)::after {
    background: var(--progress-nav-active-color, #627dbe);
}
/* VERTICAL LAYOUT -------------------------------------------------------- */
.progressNav ol.vertical,
#progressNav ol.vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 300px;
}
.progressNav ol.vertical li,
#progressNav ol.vertical li {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 1rem 0;
}
.progressNav ol.vertical li::before,
#progressNav ol.vertical li::before {
    margin: 0 1rem 0 0;
    flex-shrink: 0;
}
/* Vertical connecting line */
.progressNav ol.vertical li::after,
#progressNav ol.vertical li::after,
#progressNav ol.vertical li > .step-progress-fill {
    content: "";
    position: absolute;
    top: calc(var(--progress-nav-circle-size, 2.5rem) + 1rem);
    left: calc(var(--progress-nav-circle-size, 2.5rem) / 2 - 2px);
    width: 4px;
    height: calc(100% - 1rem);
}

.progressNav ol.vertical li::after,
#progressNav ol.vertical li::after {
    background: var(--progress-nav-track-color, #ebebeb);
}

#progressNav ol.vertical li > .step-progress-fill {
    transform: scaleY(clamp(0, var(--step-progress, 0), 1));
    transform-origin: center top;
}

.progressNav ol.vertical li:last-child::after,
#progressNav ol.vertical li:last-child::after {
    display: none;
}
.progressNav ol.vertical li:not(.current):has(~ .current)::after,
#progressNav ol.vertical li:not(.current):has(~ .current)::after {
    background: var(--progress-nav-active-color, #627dbe);
}
/* Vertical text styling */
.progressNav ol.vertical li a,
.progressNav ol.vertical li,
#progressNav ol.vertical li a,
#progressNav ol.vertical li {
    color: var(--progress-nav-track-text-color, #adadad);
    transition: color 0.3s ease;
}
.progressNav ol.vertical li.current,
.progressNav ol.vertical li.current a,
#progressNav ol.vertical li.current,
#progressNav ol.vertical li.current a,
.progressNav ol.vertical li:not(.current):has(~ .current),
.progressNav ol.vertical li:not(.current):has(~ .current) a,
#progressNav ol.vertical li:not(.current):has(~ .current),
#progressNav ol.vertical li:not(.current):has(~ .current) a {
    color: var(--progress-nav-active-color, #627dbe);
}
}
@layer base.components{

/* =========================================================
   TravelGuard Navigation — desktop styles
   ========================================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--header-nav-accent-color, #d0021b);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { top: 0; }

.tg-nav ul,
.tg-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-nav ul li,
.tg-mobile-menu ul li {
  list-style: none;
  margin: 0;
  padding: 10px;
}
.tg-nav ul li::before,
.tg-mobile-menu ul li::before {
  display: none;
}

.tg-nav {
  background: var(--header-nav-bg, #fff);
  box-shadow: var(--header-nav-shadow, 0 2px 8px rgba(0,0,0,0.1));
  position: sticky;
  top: 0;
  z-index: 1000;
}

.utility-nav {
  background: var(--header-nav-utility-bg, #14295d);
  border-bottom: 1px solid var(--header-nav-utility-border-color, #e5e7eb);
}

/* Left/right grouping: two <ul>s in the markup (left group is empty and
   collapses to zero width when unused) with space-between so the right
   group still lands flush right, matching the original layout when no
   left-side links are authored. */
.utility-container {
  max-width: var(--site-width-size-5);
  margin: 0 auto;
  padding: 0 var(--site-width-gutter, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utility-links { display: flex; gap: 20px; padding: 8px 0; align-items: center; }
.utility-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--header-nav-utility-link-color, #fff);
  font-size: var(--header-nav-utility-link-font-size, 14px);
  font-weight: var(--header-nav-utility-link-font-weight, 300);
  transition: color 0.2s ease;
}
.utility-links a:hover,
.utility-links a:focus {
  color: var(--header-nav-utility-link-color, #fff);
}
.utility-links a:focus { outline: 2px solid var(--header-nav-utility-focus-outline-color, #2563eb); outline-offset: 2px; }

/* Icons on utility links: DAM-uploaded image or an icon-font glyph
   resolved from an author-entered hex codepoint (see navigation.js). */
.tg-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.utility-nav .material-symbols-rounded,
.tg-mobile-menu .material-symbols-rounded {
    color: var(--header-nav-utility-icon-color, #f6834e);
}

.utility-nav .material-symbols-rounded {
    font-size: var(--header-nav-utility-icon-size, 1.3rem);
}

.nav-container {
  max-width: var(--site-width-size-5, 1400px);
  margin: 0 auto;
  padding: 0 var(--site-width-gutter, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
}

.logo { display: flex; align-items: center; }
.logo:focus { outline: 2px solid var(--header-nav-accent-color, #d0021b); outline-offset: 4px; border-radius: 4px; }
.logo img { height: 35px; width: auto; }

.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a,
.nav-links button {
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--header-nav-link-color, #1f2937);
    font-size: var(--header-nav-link-font-size, 16px);
    font-weight: var(--header-nav-link-font-weight, 600);
    line-height: var(--header-nav-link-line-height, 24px);
    display: flex;
    gap: 8px;
}
.nav-links a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}
.nav-links .dropdown a:hover {
    text-decoration: none;
}
.nav-links button .tg-nav-label:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}
.nav-links a:focus, .nav-links button:focus { outline: 2px solid var(--header-nav-accent-hover-color, #a30115); outline-offset: 2px; }
.nav-links button::after {
    content: ' \e313';
    font-size: 1.3rem;
    font-family: 'Material Symbols Rounded';
    transition: transform .25s ease;
}
.nav-links .is-open button::after {
    transform: rotate(180deg);
    font-size: 1.3rem;
    font-family: 'Material Symbols Rounded';
}
.nav-links a.cta-link {
  background-color: var(--header-nav-cta-bg, var(--header-nav-accent-color, #d0021b));
  display: inline-block;
  color: var(--header-nav-cta-color, #fff);
  font-size: var(--header-nav-cta-font-size, 15px);
  font-weight: var(--header-nav-cta-font-weight, 700);
  padding: var(--header-nav-cta-padding, 10px 15px);
  border-radius: var(--header-nav-cta-radius, 8px);
}
.nav-links a.cta-link:hover,
.nav-links a.cta-link:focus { background-color: var(--header-nav-cta-hover-bg, var(--header-nav-accent-hover-color, #a30115)); }

/* "Display as button" — author-toggleable per top-level nav item.
   Visually matches the dedicated CTA button so any item can be
   promoted without needing a separate field/component. */
.nav-links a.nav-cta-btn {
  background-color: var(--header-nav-cta-bg, var(--header-nav-accent-color, #d0021b));
  color: var(--header-nav-cta-color, #fff);
  padding: var(--header-nav-cta-padding, 10px 15px);
  border-radius: var(--header-nav-cta-radius, 8px);
}
.nav-links a.nav-cta-btn:hover,
.nav-links a.nav-cta-btn:focus { background-color: var(--header-nav-cta-hover-bg, var(--header-nav-accent-hover-color, #a30115)); color: var(--header-nav-cta-color, #fff); }

.tg-mobile-menu__link.nav-cta-btn {
  background: var(--header-nav-mobile-cta-bg, var(--header-nav-accent-color, #d0021b));
  color: #fff;
  justify-content: center;
  margin: 6px 4px;
  border-radius: 8px;
}
.tg-mobile-menu__link.nav-cta-btn:hover,
.tg-mobile-menu__link.nav-cta-btn:focus { background: var(--header-nav-mobile-cta-hover-bg, var(--header-nav-accent-hover-color, #a30115)); color: #fff; }

.nav-links li { position: relative; padding: 0;}
.nav-links li::before { display: none;}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--header-nav-dropdown-bg, #fff);
  min-width: 220px;
  box-shadow: var(--header-nav-dropdown-shadow, 0 4px 12px rgba(0,0,0,0.15));
  border-radius: var(--header-nav-dropdown-radius, 6px);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  margin-top: 8px;
}
.nav-links li.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
    border-radius: 8px;
    color: var(--header-nav-dropdown-link-color, #333);
    display: block;
    font-weight: 500;
    padding: 12px;
}
.dropdown a:not(:last-child) {
margin-bottom: 8px;
}
.dropdown a:hover, .dropdown a:focus {
    background-color: var(--header-nav-dropdown-link-hover-bg, #f3f4f6);
    color: var(--header-nav-accent-color, #d0021b);
    text-decoration: none;
 }
.dropdown a:focus { outline: 2px solid var(--header-nav-accent-color, #d0021b); outline-offset: -2px; }

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  background: none;
  border: 2px solid transparent;
  padding: 8px;
  border-radius: 4px;
}
.hamburger:hover { border-color: var(--header-nav-accent-color, #d0021b); }
.hamburger:focus {
  border-color: var(--header-nav-accent-color, #d0021b);
  outline: 2px solid var(--header-nav-accent-color, #d0021b);
  outline-offset: 2px;
}
.hamburger span { width: 28px; height: 3px; background: var(--header-nav-icon-bar-color, #333); border-radius: 3px; transition: all 0.3s ease; }

/* =========================================================
   Mobile menu redesign — full-width drop-down panel
   Improvements over the old dropdown-accordion panel:
   - Slides down from the top, full width, with a dimmed backdrop
     beneath it, so it reads as an extension of the header rather
     than a separate side panel
   - Sticky-feeling header inside the panel with logo + explicit
     close button, so orientation and exit are always obvious
   - CTA button and phone number promoted to the top, above the
     link list, since they're the two highest-intent actions
   - Larger (48px+) tap targets and generous spacing throughout
   - Single-level accordion for submenus with a rotating chevron
   - Smooth, GPU-friendly transform-based slide animation that
     respects prefers-reduced-motion
   - Panel scrolls internally (max-height: 88vh) if content is
     taller than the viewport, instead of pushing page content
   - Focus is trapped/managed via JS; Escape and backdrop click
     both close the menu
   ========================================================= */

.tg-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.tg-mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tg-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--header-nav-mobile-backdrop-bg, rgba(17, 24, 39, 0.55));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tg-mobile-menu.is-open .tg-mobile-menu__backdrop { opacity: 1; }

.tg-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 88vh;
  width: 100%;
  background: var(--header-nav-mobile-panel-bg, #fff);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--header-nav-mobile-panel-shadow, 0 8px 24px rgba(0,0,0,0.18));
  overflow-y: auto;
}
.tg-mobile-menu.is-open .tg-mobile-menu__panel { transform: translateY(0); }

.tg-mobile-menu__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 20px;
  border-bottom: 1px solid var(--header-nav-mobile-header-border-color, #e5e7eb);
  background: var(--header-nav-mobile-panel-bg, #fff);
}
.tg-mobile-menu__logo img { height: 26px; width: auto; }

.tg-mobile-menu__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--header-nav-mobile-close-bg, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tg-mobile-menu__close:hover,
.tg-mobile-menu__close:focus { background: var(--header-nav-mobile-close-hover-bg, #e5e7eb); outline: none; }
.tg-mobile-menu__close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--header-nav-icon-bar-color, #333);
  border-radius: 2px;
}
.tg-mobile-menu__close span:first-child { transform: rotate(45deg); }
.tg-mobile-menu__close span:last-child { transform: rotate(-45deg); }

.tg-mobile-menu__cta { padding: 20px 20px 0; }
.tg-mobile-menu__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  background: var(--header-nav-mobile-cta-bg, var(--header-nav-accent-color, #d0021b));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
}
.tg-mobile-menu__cta-btn:hover,
.tg-mobile-menu__cta-btn:focus { background: var(--header-nav-mobile-cta-hover-bg, var(--header-nav-accent-hover-color, #a30115)); }

.tg-mobile-menu__quicklinks { padding: 12px 20px 0; }
.tg-mobile-menu__quicklink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  color: var(--header-nav-mobile-quicklink-color, var(--header-nav-accent-color, #d0021b));
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.tg-mobile-menu__list { padding: 8px 8px 12px; }
.tg-mobile-menu__list > li { border-bottom: 1px solid var(--header-nav-mobile-list-border-color, #f0f1f3); }

.tg-mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 12px;
  color: var(--header-nav-mobile-link-color, #1f2937);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
}
.tg-mobile-menu__link:hover,
.tg-mobile-menu__link:focus { background: var(--header-nav-mobile-link-hover-bg, #f3f4f6); }

.tg-mobile-menu__toggle {
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--header-nav-mobile-link-color, #1f2937);
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
}
.tg-mobile-menu__toggle:hover,
.tg-mobile-menu__toggle:focus { background: var(--header-nav-mobile-link-hover-bg, #f3f4f6); outline: none; }

.tg-icon--chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--header-nav-mobile-chevron-color, #6b7280);
  border-bottom: 2px solid var(--header-nav-mobile-chevron-color, #6b7280);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.has-dropdown.is-expanded .tg-icon--chevron { transform: rotate(-135deg); }

.tg-icon--phone {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 4px;
  flex-shrink: 0;
}

.tg-mobile-menu__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--header-nav-mobile-submenu-bg, #f9fafb);
  border-radius: 8px;
  margin: 0 4px;
}
.has-dropdown.is-expanded .tg-mobile-menu__submenu { max-height: 600px; }

.tg-mobile-menu__submenu a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px 0 24px;
  color: var(--header-nav-mobile-submenu-link-color, #4b5563);
  text-decoration: none;
  font-size: 14.5px;
  border-left: 3px solid transparent;
}
.tg-mobile-menu__submenu a:hover,
.tg-mobile-menu__submenu a:focus {
  color: var(--header-nav-mobile-submenu-link-hover-color, var(--header-nav-accent-color, #d0021b));
  border-left-color: var(--header-nav-mobile-submenu-link-hover-color, var(--header-nav-accent-color, #d0021b));
  background: #fff;
}

.tg-mobile-menu__footer-links {
  margin-top: 8px;
  padding: 16px 20px 28px;
  background: var(--header-nav-mobile-footer-bg, #f8f9fa);
  border-top: 1px solid var(--header-nav-mobile-footer-border-color, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  flex-direction: column;
  padding-left: var(--header-nav-mobile-footer-padding-left, 12px) !important;
}
.tg-mobile-menu__footer-links a {
  font-size: 13.5px;
  color: var(--header-nav-mobile-footer-link-color, #6b7280);
  text-decoration: none;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tg-mobile-menu__footer-links a:hover,
.tg-mobile-menu__footer-links a:focus { color: var(--header-nav-mobile-footer-link-hover-color, var(--header-nav-accent-color, #d0021b)); }

body.tg-menu-open { overflow: hidden; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (max-width: 899px) {
  .utility-nav { display: none; }
  .hamburger { display: flex; }
  .nav-links { display: none; }
}

@media (min-width: 900px) {
  .tg-mobile-menu { display: none; }

  .nav-links .dropdown {
    width: 340px;
    min-width: 0;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    left: 50%;
    right: auto;
    /* Component JS sets the shift to preserve a 24px viewport gutter. */
    translate: var(--dropdown-shift, 0px) 0;
    transform: translate(-50%, -10px);
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease;
  }

  .nav-links li.is-open .dropdown {
    transform: translate(-50%, 0);
  }

  .nav-links .dropdown a {
    padding-inline: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-contrast: high) {
  .nav-links a:focus,
  .dropdown a:focus,
  .tg-mobile-menu a:focus,
  .tg-mobile-menu button:focus { outline-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .dropdown { transition: none; }

  .tg-mobile-menu__panel,
  .tg-mobile-menu__backdrop,
  .tg-mobile-menu__submenu,
  .tg-icon--chevron,
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
}
@layer base.components{
.drop {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    &:has(+ .customErr) {
        border: 1px solid var(--multiselect-error-border-color, #d92d20);
    }
}
.drop.open {
    z-index: 100;
    border: 1px solid var(--multiselect-accent-color, #627dbe);
}
.drop.open .inputField {
    border: 0;
}
.drop.open .drop-screen {
    z-index: 100;
    display: block;
}
.drop.open .drop-options {
    border: 1px solid var(--multiselect-options-border-color, #999);
    z-index: 200;
    max-height: 200px;
    border-radius: 0 0 var(--radius-size-1) var(--radius-size-1);
    box-shadow: 0 0 6px #d8d8d8;
}
.drop.open .drop-display {
    z-index: 200;
}
.drop select {
    display: none;
}
.drop .drop-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--multiselect-overlay-color, #000);
    top: 0;
    left: 0;
    opacity: 0;
    display: none;
    z-index: 1;
}
.drop {
    border: 1px solid var(--multiselect-border-color, #5c5c5c);
    color: var(--multiselect-text-color, #333);
    line-height: 1.6;
    border-radius: var(--radius-size-1);
}
.drop .drop-display {
    position: relative;
    padding: 0 20px 5px 5px;
    width: 100%;
    background: var(--multiselect-bg, #fff);
    z-index: 1;
    margin: 0;
    font-size: var(--font-size-3);
    min-height: 46px;
    display: flex;
    overflow: hidden;
    border-radius: 0.5rem;
}
.drop .drop-display:hover:after {
    opacity: 0.75;
}
.drop .drop-display:after {
    position: absolute;
    right: var(--size-4);
    top: var(--size-4);
    font-size: var(--font-size-6);
    color: var(--multiselect-icon-color, #000);
}
.drop .drop-display .item {
    position: relative;
    display: inline-block;
    border: 1px solid var(--multiselect-accent-color, #627dbe);
    margin: 5px 5px -5px 0;
    background-color: var(--multiselect-item-bg, #f2f6fc);
    padding: 0 var(--size-4) 0 var(--size-1);
    overflow: hidden;
    height: 34px;
    line-height: 32px;
    border-radius: var(--radius-size-1);
}
.drop .drop-display .item .btnclose {
    color: var(--multiselect-icon-color, #000);
    position: absolute;
    font-size: var(--font-size-1);
    right: 9px;
    top: 0;
    cursor: pointer;
    font-style: normal;
    font-weight: var(--font-weight-4);
}
.drop .drop-display .item .btnclose:hover {
    opacity: 0.75;
}
.drop .drop-display .item.remove {
    animation:
        removeSelected 0.2s,
        hide 1s infinite;
    animation-delay: 0, 0.2s;
    display: none;
}
.drop .drop-display .item.add {
    animation: addSelected 0.2s;
}
.drop .drop-display .item.hide {
    display: none;
}
.drop .drop-options {
    background: var(--multiselect-bg, #fff);
    position: absolute;
    width: 100%;
    max-height: 0;
    overflow-y: auto;
    transition: all 0.25s linear;
    z-index: 1;
}
.drop .drop-options a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: var(--multiselect-option-color, #000);
    position: relative;
    transition: all .3s;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 1px solid var(--multiselect-option-divider-color, #adadad);
}
.drop .drop-options a:hover {
    background: var(--multiselect-option-hover-bg, #ebebeb);
    cursor: pointer;
}
.drop .drop-options a:focus-visible {
    outline-offset: 0;
    border: 2px solid;
    outline: 0;
}
.drop .drop-options a.remove {
    animation: removeOption 0.2s;
    max-height: 0;
    display: none;
}
.drop .drop-options a.add {
    animation: addOption 0.2s;
}
.drop .drop-options a.hide {
    display: none;
}
.drop-expand {
    background: var(--multiselect-expand-bg, #3b5cad);
    color: var(--multiselect-expand-text-color, #fff) !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.drop-expand:hover {
    background: var(--multiselect-expand-bg, #3b5cad) !important;
    color: var(--multiselect-expand-text-color, #fff) !important;
}

.drop.open .drop-options {
    border-radius: 0.5rem !important;
    margin-top: 5px !important;
    max-height: 500px;
}
.drop .drop-options a {
    border-bottom: none !important;
}
.drop-expand::before {
    content: "\e2db";
    font-family: "Material Symbols Rounded";
    margin-left: -4px;
    font-size: 1rem;
}
.drop .drop-display::after {
    font-family: "Material Symbols Rounded";
    content: "\e313";
    position: absolute;
    font-size: 1.2rem;
    color: var(--multiselect-caret-icon-color, #e7692f);
    right: 15px;
    top: 10px;
    transition: transform 200ms ease;
}
.drop.open .drop-display::after {
    font-family: "Material Symbols Rounded";
    content: "\e313";
    position: absolute;
    font-size: 1.2rem;
    color: var(--multiselect-caret-icon-color, #e7692f);
    right: 15px;
    top: 10px;
    transform: rotate(180deg);
}
#opt:focus-visible {
    border: 2px solid deepskyblue;
    background-color: lightblue;
}
#optadd:focus-visible {
    border: 2px solid deepskyblue;
    background-color: lightblue;
}
@keyframes pop {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes removeOption {
    from {
        max-height: 40px;
    }
    to {
        max-height: 0;
    }
}
@keyframes addOption {
    from {
        max-height: 0;
    }
    to {
        max-height: 40px;
    }
}
@keyframes removeSelected {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}
@keyframes addSelected {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes hide {
    from,
    to {
        max-height: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        border-width: 0;
    }
}
}
@layer base.components{

:root{
  /* Surfaces */
  --product-table-header-bg: #1f2937;
  --product-table-featured-bg: #111827;
  --product-table-category-bg: #4b5563;
  --product-table-row-alt-bg: #f9fafb;
  --product-table-cell-bg: #f3f4f6;
  --product-table-cell-alt-bg: #e5e7eb;

  /* Text */
  --product-table-text-color: #111827;
  --product-table-text-muted-color: #4b5563;

  /* Border / shadow */
  --product-table-border-color: #e5e7eb;
  --product-table-shell-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --product-table-radius: 10px;

  /* Interactive */
  --product-table-accent-color: #374151;
  --product-table-focus-color: #374151;
  --product-table-toggle-icon-color: var(--product-table-accent-color);

  /* Status */
  --product-table-success-color: #16a34a;
  --product-table-danger-color: #dc2626;
}

.plan-comparison-instance{max-width:1180px; margin:0 auto 32px;}

.plan-comparison-instance .intro{margin:0 0 16px;}
.plan-comparison-instance .intro p{margin:0; color:var(--product-table-text-muted-color); font-size:0.95rem;}

.plan-comparison-instance .toolbar{padding: 1rem; background:var(--product-table-title-bg); color:var(--product-table-title-color);}
.plan-comparison-instance .toolbar p{padding-bottom: 0;}

.plan-comparison-instance .visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.plan-comparison-instance .table-shell{
  background:#fff;
  border-radius:var(--product-table-radius);
  border:1px solid var(--product-table-border-color);
  box-shadow:var(--product-table-shell-shadow);
  overflow: clip;
}
.plan-comparison-instance .table-shell:focus-visible{outline:2px solid var(--product-table-focus-color); outline-offset:-2px;}

.plan-comparison-instance [role="rowgroup"]{display:block;}

.plan-comparison-instance .row{
  display:grid;
  /* Keep plan widths consistent, with a readable minimum on narrower desktops. */
  grid-template-columns:minmax(0,1fr) repeat(var(--tier-count,3),minmax(var(--product-table-plan-min-width,180px),calc(100% / 6)));
  align-items:stretch;
}

.plan-comparison-instance .header-rowgroup{
  position: sticky;
  top: 127px;
  z-index: 4;
}
.plan-comparison-instance .header-row{
  background: var(--product-table-header-bg);
}
.plan-comparison-instance .cell.corner{
  background:#fff;
  color:var(--product-table-text-color);
  display:flex;
  align-items:center;
  padding:14px 20px;
}
.plan-comparison-instance .cell.corner h1{
  /* Brand's global `h1{...}` reset lives in a higher-priority cascade layer
     than this file's `base.components` layer, so it wins over these rules
     regardless of selector specificity — the important flags below are the
     only way to keep this component's own heading treatment. */
  margin:0 !important;
  font-size:1.2rem !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
  line-height:1.3 !important;
  color:var(--product-table-text-color) !important;
  text-align:left !important;
}
.plan-comparison-instance .cell.tier-name{
  color:#fff;
  font-size:0.95rem;
  font-weight:600;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 12px;
  border-left:1px solid rgba(255,255,255,0.15);
}
.plan-comparison-instance .cell.tier-name[data-featured="true"]{background:var(--product-table-featured-bg);}

.plan-comparison-instance .category-row{grid-template-columns:1fr;}
.plan-comparison-instance .cell.category-cell{
  background:var(--product-table-category-bg);
  color:#fff;
  padding:12px 20px;
}
.plan-comparison-instance .cell.category-cell h2{
  /* See note on .cell.corner h1 above — same cross-layer collision, requiring the important flags below. */
  margin:0 !important;
  font-size:0.92rem !important;
  font-weight:600 !important;
  letter-spacing:0.01em;
  color: white !important;
}

.plan-comparison-instance .benefit-row{border-bottom:1px solid var(--product-table-border-color);}
.plan-comparison-instance .benefit-row:nth-of-type(even){background:var(--product-table-row-alt-bg);}

.plan-comparison-instance .cell.benefit-cell{
  background:var(--product-table-cell-bg);
  padding:16px 20px;
}
.plan-comparison-instance .benefit-row:nth-of-type(even) .cell.benefit-cell{background:var(--product-table-cell-alt-bg);}

.plan-comparison-instance .cell.value-cell{
  padding:16px 16px;
  border-left:1px solid var(--product-table-border-color);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:0.875rem;
}
.plan-comparison-instance .value-cell .status-icon{width:22px; height:22px; flex:0 0 auto;}
.plan-comparison-instance .value-cell .status-icon.covered{color:var(--product-table-success-color);}
.plan-comparison-instance .value-cell .status-icon.not-covered{color:var(--product-table-danger-color);}
.plan-comparison-instance .value-cell .status-text{line-height:1.4;}
.plan-comparison-instance .value-cell.not-covered .status-text{color:var(--product-table-text-muted-color);}
.plan-comparison-instance .value-cell .status-text a{color:var(--product-table-accent-color);}

.plan-comparison-instance details.benefit-detail summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.plan-comparison-instance details.benefit-detail summary::-webkit-details-marker{display:none;}
.plan-comparison-instance details.benefit-detail summary::before{
  content:"\e147";
  font-family:"Material Symbols Rounded";
  font-size:1.35rem;
  line-height:1;
  flex:0 0 auto;
  color:var(--product-table-toggle-icon-color);
  transition:transform .2s ease;
}
.plan-comparison-instance details.benefit-detail[open] summary::before{
  content:"\e644";
  transform:rotate(180deg);
}
.plan-comparison-instance details.benefit-detail summary:focus-visible{
  outline:2px solid var(--product-table-focus-color); outline-offset:3px; border-radius:4px;
}
.plan-comparison-instance details.benefit-detail summary h3{
  /* See note on .cell.corner h1 above — same cross-layer collision, requiring the important flags below. */
  margin:0 !important;
  font-size:0.95rem !important;
  font-weight:600 !important;
  color:var(--product-table-text-color) !important;
}
.plan-comparison-instance details.benefit-detail .detail-body{
  margin:8px 0 0 34px;
  font-size:0.87rem;
  line-height:1.5;
  color:var(--product-table-text-muted-color);
  max-width:52ch;
}
.plan-comparison-instance details.benefit-detail .detail-body p{margin:0 0 10px; padding-bottom:0; font-weight: 400;}
.plan-comparison-instance details.benefit-detail .detail-body p:last-child{margin-bottom:0;}
.plan-comparison-instance details.benefit-detail .detail-body a{color:var(--product-table-accent-color);}
.plan-comparison-instance details.benefit-detail .sub-items{margin:10px 0 0; padding:0; list-style:none;}
.plan-comparison-instance details.benefit-detail .sub-items li{margin:0 0 8px;}
.plan-comparison-instance details.benefit-detail .sub-items li:last-child{margin-bottom:0;}

/* only table-shells in plan-table-blocks that follow another plan-table-block */
/* 1) PREVIOUS block in each adjacent pair:
   any plan-table-block that has a next sibling plan-table-block */
.plan-comparison-instance .plan-table-block:has(+ .plan-table-block) .table-shell {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 2) NEXT block in each adjacent pair:
   any plan-table-block that follows another plan-table-block */
.plan-comparison-instance .plan-table-block + .plan-table-block .table-shell {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (prefers-reduced-motion: reduce){
  .plan-comparison-instance details.benefit-detail summary::before{transition:none;}
}

@media (max-width:700px){
  .plan-comparison-instance .row{grid-template-columns:repeat(var(--tier-count,3),1fr);}
  .plan-comparison-instance .cell.corner{grid-column:1 / -1;}
  .plan-comparison-instance .cell.benefit-cell{grid-column:1 / -1;}
  .plan-comparison-instance .category-row{grid-template-columns:1fr;}
  .plan-comparison-instance .cell.value-cell{border-left:1px solid var(--product-table-border-color); padding:14px 8px;}
  .plan-comparison-instance .cell.value-cell:first-of-type{border-left:none;}
  .plan-comparison-instance .cell.corner h1{font-size:1.05rem !important;}
}

@media (max-width:767px){
  .plan-comparison-instance .header-rowgroup{top:116px;}
}
}
/*
 * Manifest for the generic (cross-brand) utility layer. Each imported file
 * is a plain partial; the layer() condition here assigns it to
 * utility.generic — the files themselves don't self-wrap in @layer.
 */
@layer utility.generic{

/* ==========================================================================
   AEM Class-Based Responsive Grid System
   Author-controlled via Style System (cq:styleGroups) on the Container component

   <div class="container [grid-*]">
     <div class="cmp-container">
       <div class="container [col-span-*]"> ... </div>
     </div>
   </div>
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  --grid-columns: 1; /* safe default: undefined --cols-N degrades to stacked, not a cramped 12-col grid */
  --grid-gap-row: 24px;
  --grid-gap-col: 24px;
  --order-first: -1;
  --order-last: 999;
}

/* sm: 576px | md: 768px | lg: 1024px | xl: 1440px */

/* ---------------------------------------------------------------------------
   2. Base grid behavior (author applies `.grid` to the outer .container)
   --------------------------------------------------------------------------- */
.container.grid > .cmp-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap-col);
  row-gap: var(--grid-gap-row);
}

/* Auto-placement handles even splits — no child class needed for those */

/* Gap variants — author-selectable, independent of column count */
.grid--gap-none > .cmp-container { --grid-gap-row: 0; --grid-gap-col: 0; }
.grid--gap-sm   > .cmp-container { --grid-gap-row: 12px; --grid-gap-col: 12px; }
.grid--gap-md   > .cmp-container { --grid-gap-row: 24px; --grid-gap-col: 24px; }
.grid--gap-lg   > .cmp-container { --grid-gap-row: 40px; --grid-gap-col: 40px; }

/* ---------------------------------------------------------------------------
   3. Column-count variants (author stacks with `.grid` + `.grid--cols-1` base,
   e.g. "grid grid--cols-1 grid--sm-cols-2")
   --------------------------------------------------------------------------- */
.grid--cols-1 > .cmp-container { --grid-columns: 1; }

/* Only values the content policy actually uses are defined below.
   Add more on demand, not speculatively. */
@media (min-width: 576px) {
  .grid--sm-cols-2 > .cmp-container { --grid-columns: 2; }
}
@media (min-width: 768px) {
  .grid--md-cols-2  > .cmp-container { --grid-columns: 2; }
  .grid--md-cols-3  > .cmp-container { --grid-columns: 3; }
  .grid--md-cols-12 > .cmp-container { --grid-columns: 12; } /* "Custom" — matches col-span-md-* below */
}
@media (min-width: 990px) {
  .grid--lg-cols-2  > .cmp-container { --grid-columns: 2; }
  .grid--lg-cols-3  > .cmp-container { --grid-columns: 3; }
  .grid--lg-cols-4 > .cmp-container { --grid-columns: 4; }
  .grid--lg-cols-5 > .cmp-container { --grid-columns: 5; }
  .grid--lg-cols-6 > .cmp-container { --grid-columns: 6; }
}

/* Only needed for uneven splits — auto-placement already handles even ones.
   Grid placement is a property of whatever's directly touching the grid, so
   this has to target the OUTER wrapper of any component that might sit
   there — not just Container. .text/.button cover both the core Text/Button
   components and their form-field namesakes (same outer class either way);
   .options covers all four form-options field types (checkbox/radio/
   dropdown/multi-dropdown share one outer class). Add to this list as new
   component types show up as grid children -- same pattern as the padding
   utilities' :is() list above. */
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-1  { grid-column: span 1; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-2  { grid-column: span 2; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-3  { grid-column: span 3; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-4  { grid-column: span 4; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-5  { grid-column: span 5; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-6  { grid-column: span 6; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-7  { grid-column: span 7; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-8  { grid-column: span 8; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-9  { grid-column: span 9; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-10 { grid-column: span 10; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-11 { grid-column: span 11; }
:is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-12 { grid-column: 1 / -1; } /* "Full Width" — spans the whole row on ANY column count, not just 12 */

/* Only -md- exists — content policy only uses col-span-md-*. Add
   -lg-/-sm- the same shape if a policy option ever needs its own break. */
@media (min-width: 768px) {
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-1  { grid-column: span 1; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-2  { grid-column: span 2; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-3  { grid-column: span 3; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-4  { grid-column: span 4; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-6  { grid-column: span 6; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-8  { grid-column: span 8; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-9  { grid-column: span 9; }
  :is(.container, .title, .text, .image, .button, .separator, .options, .experiencefragment).col-span-md-12 { grid-column: 1 / -1; } /* "Full Width" — same as above, at md+ */
}

/* ---------------------------------------------------------------------------
   4. Alignment / order utilities (optional, author-selectable per child)
   --------------------------------------------------------------------------- */
   .container.align-self-start  { align-self: flex-start; }
   .container.align-self-center { align-self: center; }
   .container.align-self-end    { align-self: flex-end; }

   .container.order-first { order: var(--order-first); }
   .container.order-last  { order: var(--order-last); }

   @media (max-width: 990px) {
       .container.order-first-mobile { order: var(--order-first); }
       .container.order-last-mobile  { order: var(--order-last); }
   }

.grid-equal-height > .cmp-container > .container {
    height: 100%;
}
.grid-equal-height > .cmp-container > .container > .cmp-container {
    height: 100%;
}
@scope (.grid-equal-height) {
  .cmp-experiencefragment,
  .cmp-container,
  .aem-Grid,
  .card {
    height: 100%;
  }
}
}
@layer utility.generic{
/* Mobile carousel; the existing grid takes over at 990px. */
@media (width < 990px) {
  /* Escape one level of the parent site's horizontal gutter. */
  .container.cards-carousel {
    margin-inline: calc(-1 * var(--site-width-gutter));
    width: calc(100% + var(--site-width-gutter) + var(--site-width-gutter));
    max-width: none;
  }

  /* Product Display loads a separate AEM clientlib outside our cascade layers.
     Pin only the mobile track/slide geometry so that clientlib cannot restore
     its stacked layout. Explicit row direction also overrides column flex. */
  /* stylelint-disable declaration-no-important -- override AEM component clientlib layout */
  .product-display.product-display-carousel {
    --carousel-card-width: 82%;

    display: flex !important;
    flex-flow: row nowrap !important;
    gap: var(--carousel-gap, 3%) !important;

    /* Escape the same site gutter as the generic carousel, on the track itself. */
    box-sizing: border-box !important;
    margin-inline: calc(-1 * var(--site-width-gutter, 2rem)) !important;
    width: calc(100% + 2 * var(--site-width-gutter, 2rem)) !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;

    /* Scroll containers clip shadows; reserve paint space inside the track. */
    padding-block: var(--product-carousel-shadow-space-top, 1rem)
      var(--product-carousel-shadow-space-bottom, 3.5rem) !important;
  }

  .product-display.product-display-carousel > .card {
    box-sizing: border-box !important;
    flex: 0 0 var(--carousel-card-width, 90%) !important;
    width: var(--carousel-card-width, 90%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* stylelint-enable declaration-no-important */

  /* Add to the outer Container wrapper; its direct teasers become slides.
     The existing grid classes can stay on the wrapper. */
  .container.cards-carousel > .cmp-container,
  .product-display.product-display-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--carousel-gap, 3%);
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 1rem;
  }

  .container.cards-carousel > .cmp-container > .teaser,
  .product-display.product-display-carousel > .card {
    box-sizing: border-box;
    flex: 0 0 var(--carousel-card-width, 90%);
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: center;
    overflow-wrap: anywhere;
  }

  .container.cards-carousel > .cmp-container:focus-visible,
  .product-display.product-display-carousel:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  /* End spacing lets the first and last cards reach the center snap position. */
  .container.cards-carousel > .cmp-container > .teaser:first-child,
  .product-display.product-display-carousel > .card:nth-child(1 of .card:not([hidden], .hide)) {
    margin-inline-start: calc((100% - var(--carousel-card-width, 90%)) / 2);
  }

  .container.cards-carousel > .cmp-container > .teaser:last-child,
  .product-display.product-display-carousel > .card:nth-last-child(1 of .card:not([hidden], .hide)) {
    margin-inline-end: calc((100% - var(--carousel-card-width, 90%)) / 2);
  }

  /* Keep native scrolling controls when generated markers are unsupported. */
  @supports (scroll-marker-group: after) {
    .container.cards-carousel > .cmp-container {
      scroll-marker-group: after;
      scrollbar-width: none;
    }

    .container.cards-carousel > .cmp-container::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-block-end: 1.5rem;
    }

    .container.cards-carousel > .cmp-container > .teaser::scroll-marker {
      content: "";
      box-sizing: border-box;
      width: 28px;
      height: 28px;
      padding: 9px;
      border: 0;
      border-radius: 50%;
      background-color: var(--carousel-dot-inactive-color, #888);
      background-clip: content-box;
    }

    /* stylelint-disable selector-pseudo-class-no-unknown -- CSS Overflow 5 active scroll marker */
    .container.cards-carousel > .cmp-container > .teaser::scroll-marker:target-current {
      background-color: var(--carousel-dot-active-color, #ff6720);
    }
    /* stylelint-enable selector-pseudo-class-no-unknown */

    .container.cards-carousel > .cmp-container > .teaser::scroll-marker:focus-visible {
      outline: 2px solid currentcolor;
      outline-offset: 2px;
    }
  }
}

.plan-dots {
    display: none;
}

@media (max-width: 989.98px) {
    .has-plan-dots {
        scroll-marker-group: none;
        --product-carousel-shadow-space-bottom: 1.75rem;
    }

    .has-plan-dots::scroll-marker-group {
        display: none;
    }

    .has-plan-dots > *::scroll-marker {
        display: none;
    }

    .plan-dots {
        display: flex;
        justify-content: center;
        gap: 4px;
    }

    .plan-dots.indicators-top {
        margin-block: 0 -0.5rem;
    }

    .plan-dots[hidden] {
        display: none;
    }

    .plan-dots__dot {
        appearance: none;
        -webkit-appearance: none;
        box-sizing: border-box;
        width: 28px;
        height: 28px;
        margin: 0;
        padding: 9px;
        border: 0;
        border-radius: 50%;
        background-color: var(--carousel-dot-inactive-color, #888);
        background-clip: content-box;
        cursor: pointer;
    }

    .plan-dots__dot[aria-current="true"] {
        background-color: var(--carousel-dot-active-color, #ff6720);
    }

    .plan-dots__dot:focus-visible {
        outline: currentcolor solid 2px;
        outline-offset: 2px;
    }

    @media (max-width: 990px) {
        .product-display.product-display-carousel,
        .container.cards-carousel > .cmp-container {
            scrollbar-width: none;
        }

        .product-display.product-display-carousel::-webkit-scrollbar,
        .container.cards-carousel > .cmp-container::-webkit-scrollbar {
            display: none;
        }
    }
}
}
@layer utility.generic{
/* Link-style disclosure */
.accordion-link > .cmp-accordion,
.accordion-link > .cmp-accordion > .cmp-accordion__item {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header {
  margin: 0;
  padding: 0;
  font: inherit;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button {
  appearance: none;
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-align: start;
  color: var(--link-color, #0645ad);
  text-decoration: underline;
  cursor: pointer;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button > .cmp-accordion__title {
  font: inherit;
  color: inherit;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button::before,
.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button::after,
.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button > .cmp-accordion__icon {
  display: none;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button:hover {
  color: var(--link-hover-color, #0b0080);
  text-decoration: none;
}

.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__header > .cmp-accordion__button:focus-visible {
  outline: 2px solid var(--link-focus-outline-color, #0b0080);
  outline-offset: 3px;
}

/* Preserve AEM's expanded/hidden panel display rules. */
.accordion-link > .cmp-accordion > .cmp-accordion__item > .cmp-accordion__panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
}
@layer utility.generic{

/* ---------------------------------------------------------------------------
   5. Flexbox / Alignment utilities
   --------------------------------------------------------------------------- */

.flex-row > .cmp-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--grid-gap-col);
    row-gap: var(--grid-gap-row);
}
.flex-column > .cmp-container {
    display: flex;
    flex-direction: column;
    column-gap: var(--grid-gap-col);
    row-gap: var(--grid-gap-row);
}
.justify-start   > .cmp-container { justify-content: flex-start; }
.justify-center  > .cmp-container { justify-content: center; }
.justify-end     > .cmp-container { justify-content: flex-end; }
.justify-between > .cmp-container { justify-content: space-between; }

.align-items-start   > .cmp-container { align-items: flex-start; }
.align-items-center  > .cmp-container { align-items: center; }
.align-items-end     > .cmp-container { align-items: flex-end; }
.align-items-stretch > .cmp-container { align-items: stretch; }

.flex-nowrap > .cmp-container { flex-wrap: nowrap; }

/* Apply to the child component wrapper that should take available space. */
.flex-1 { flex: 1; }
.flex-grow { flex-grow: 1; }

.d-flex { display: flex;}
.btn-left  { justify-content: flex-start; }
.btn-center { justify-content: center; }
.btn-right { justify-content: flex-end; }

/* Stack an existing flex layout regardless of available horizontal space. */
@media (width <= 990px) {
    .flex-column-mobile > .cmp-container {
        flex-flow: column nowrap;
        align-items: stretch;
    }
}
}
@layer utility.generic{

/* ---------------------------------------------------------------------------
   Padding utilities
   Applied to following componenets: Container, XF, Title, Text, Image, and Button
   --------------------------------------------------------------------------- */

/* Adjust vertical spacing between layout children on mobile. */
@media (width <= 990px) {
    .container.row-gap-mobile-0 > .cmp-container {
        row-gap: 0;
    }

    /* Matches the compact grid--gap-sm gap in grid.css. */
    .container.row-gap-mobile-sm > .cmp-container {
        row-gap: 12px;
    }
}

/* ---------- ALL SIDES ---------- */
.padding-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding: var(--size-2, 8px); }
.padding-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding: var(--size-4, 16px); }
.padding-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding: var(--size-6, 24px); }
.padding-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding: var(--size-8, 32px); }

/* ---------- VERTICAL (top + bottom) ---------- */
.padding-y-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-2, 8px); padding-bottom: var(--size-2, 8px); }
.padding-y-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-4, 16px); padding-bottom: var(--size-4, 16px); }
.padding-y-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-6, 24px); padding-bottom: var(--size-6, 24px); }
.padding-y-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-8, 32px); padding-bottom: var(--size-8, 32px); }

/* ---------- HORIZONTAL (left + right) ---------- */
.padding-x-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-2, 8px); padding-right: var(--size-2, 8px); }
.padding-x-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-4, 16px); padding-right: var(--size-4, 16px); }
.padding-x-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-6, 24px); padding-right: var(--size-6, 24px); }
.padding-x-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-8, 32px); padding-right: var(--size-8, 32px); }

/* ---------- TOP ONLY ---------- */
.padding-t-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-2, 8px); }
.padding-t-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-4, 16px); }
.padding-t-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-6, 24px); }
.padding-t-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-top: var(--size-8, 32px); }

/* ---------- BOTTOM ONLY ---------- */
.padding-b-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-bottom: var(--size-2, 8px); }
.padding-b-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-bottom: var(--size-4, 16px); }
.padding-b-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-bottom: var(--size-6, 24px); }
.padding-b-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-bottom: var(--size-8, 32px); }

/* ---------- LEFT ONLY ---------- */
.padding-l-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-2, 8px); }
.padding-l-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-4, 16px); }
.padding-l-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-6, 24px); }
.padding-l-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-left: var(--size-8, 32px); }

/* ---------- RIGHT ONLY ---------- */
.padding-r-sm > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-right: var(--size-2, 8px); }
.padding-r-md > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-right: var(--size-4, 16px); }
.padding-r-lg > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-right: var(--size-6, 24px); }
.padding-r-xl > :is(.cmp-container, .cmp-experiencefragment, .cmp-title, .cmp-text, .cmp-image, .cmp-button) { padding-right: var(--size-8, 32px); }
}
@layer utility.generic{

/* Apply these classes to the outer Separator component wrapper. */

/* Vertical spacing; reset horizontal margins on the separator rule. */
.separator-margin-y-0 > .cmp-separator > .cmp-separator__horizontal-rule { margin: 0; }
.separator-margin-y-xs > .cmp-separator > .cmp-separator__horizontal-rule { margin: var(--size-1) 0; }
.separator-margin-y-sm > .cmp-separator > .cmp-separator__horizontal-rule { margin: var(--size-2) 0; }
.separator-margin-y-md > .cmp-separator > .cmp-separator__horizontal-rule { margin: var(--size-4) 0; }
.separator-margin-y-lg > .cmp-separator > .cmp-separator__horizontal-rule { margin: var(--size-6) 0; }
.separator-margin-y-xl > .cmp-separator > .cmp-separator__horizontal-rule { margin: var(--size-8) 0; }

/* Side-specific options override the corresponding vertical spacing. */
.separator-margin-t-0 > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: 0; }
.separator-margin-t-xs > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: var(--size-1); }
.separator-margin-t-sm > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: var(--size-2); }
.separator-margin-t-md > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: var(--size-4); }
.separator-margin-t-lg > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: var(--size-6); }
.separator-margin-t-xl > .cmp-separator > .cmp-separator__horizontal-rule { margin-top: var(--size-8); }

.separator-margin-b-0 > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: 0; }
.separator-margin-b-xs > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: var(--size-1); }
.separator-margin-b-sm > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: var(--size-2); }
.separator-margin-b-md > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: var(--size-4); }
.separator-margin-b-lg > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: var(--size-6); }
.separator-margin-b-xl > .cmp-separator > .cmp-separator__horizontal-rule { margin-bottom: var(--size-8); }
}
@layer utility.generic{
/* Site Width — constrains a container to a max-width and centers it */
/* Auto margins on flex children prevent stretching; explicitly fill up to the cap. */
.site-width-1,
.site-width-2,
.site-width-3,
.site-width-4,
.site-width-5 {
    width: 100%;
}

.site-width-1 { max-width: var(--site-width-size-1); margin-left: auto; margin-right: auto; padding-left: var(--site-width-gutter); padding-right: var(--site-width-gutter); }
.site-width-2 { max-width: var(--site-width-size-2); margin-left: auto; margin-right: auto; padding-left: var(--site-width-gutter); padding-right: var(--site-width-gutter); }
.site-width-3 { max-width: var(--site-width-size-3); margin-left: auto; margin-right: auto; padding-left: var(--site-width-gutter); padding-right: var(--site-width-gutter); }
.site-width-4 { max-width: var(--site-width-size-4); margin-left: auto; margin-right: auto; padding-left: var(--site-width-gutter); padding-right: var(--site-width-gutter); }
.site-width-5 { max-width: var(--site-width-size-5); margin-left: auto; margin-right: auto; padding-left: var(--site-width-gutter); padding-right: var(--site-width-gutter); }

/* Full bleed — no constraint, edge to edge */
.site-width-full { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Zero out the inner site-width's own gutter on mobile so it doesn't stack
   with the outer site-width's padding — the outer gutter is enough */
@media (max-width: 767px) {
  [class*="site-width-"] [class*="site-width-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Size */
.bg-image-cover > .cmp-container  { background-size: cover; }
.bg-image-contain > .cmp-container { background-size: contain; }
.bg-image-auto > .cmp-container { background-size: auto; }

/* Position */
.bg-image-pos-center > .cmp-container { background-position: center center; }
.bg-image-pos-top > .cmp-container { background-position: center top; }
.bg-image-pos-bottom > .cmp-container { background-position: center bottom; }
.bg-image-pos-left > .cmp-container { background-position: left center; }
.bg-image-pos-right > .cmp-container { background-position: right center; }

/* Repeat */
.bg-image-repeat > .cmp-container { background-repeat: repeat; }
.bg-image-no-repeat > .cmp-container { background-repeat: no-repeat; }

/* Section BG Gradient */
.bg-gradient-fade {
    background-image: linear-gradient(180deg, #fbfbf9 32.75%, #fff);
}

/* Drop Shadow */
.drop-shadow { filter: var(--brand-drop-shadow); }

.rounded > .cmp-container { border-radius: var(--size-2); }

.card {
    box-shadow: var(--card-shadow);
    padding: var(--size-5);
    overflow: hidden;
    border-radius: var(--radius-size-2);
    background-color: var(--card-bg);
    > .cmp-container {
        gap: 1.25rem;
        display: flex;
        flex-direction: column;
    }
     > .cmp-teaser {
        gap: 1.25rem;
        display: flex;
        flex-direction: column-reverse;
         a.cmp-teaser__action-link {
            display: flex;
         }
         .cmp-teaser__content {
            gap: 1.25rem;
            display: flex;
            flex-direction: column;
         }
    }
}
.card.card--plan-basic {
  background: var(--white);
  box-shadow: none;
}

/* The footer XF opts its containing page grid into a full-height layout. */
.aem-Grid:has(> .experiencefragment.u-footer-bottom) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.aem-Grid > .experiencefragment.u-footer-bottom {
    margin-top: auto;
}

/* Author content iframes resize to their contents: viewport minimums can
   cause a resize loop. Keep normal content height when edit placeholders exist. */
.aem-Grid:has(> .experiencefragment.u-footer-bottom):has(.newpar, .cq-placeholder) {
    min-height: 0;
}

/* Two direct children: main content first, sidebar second. */
.container.layout-sidebar > .cmp-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sidebar-gap, var(--grid-gap-col, 24px));
}

.container.layout-sidebar > .cmp-container > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Main content absorbs available space; both children fill a row when stacked. */
.container.layout-sidebar > .cmp-container > :first-child {
    flex: 999 1 var(--sidebar-content-min, 30rem);
}

.container.layout-sidebar > .cmp-container > :nth-child(2) {
    flex: 1 1 var(--sidebar-width, 18rem);
    position: sticky;
    top: var(--sidebar-sticky-top, 1rem);
    align-self: flex-start;
}

@media (width <= 990px) {
    .u-sticky-mobile {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* Let modals inside an XF stack above the page-level backdrop. */
    .modal-open .u-sticky-mobile {
        position: relative;
        top: auto;
        z-index: auto;
    }

    .container.layout-sidebar > .cmp-container > :first-child,
    .container.layout-sidebar > .cmp-container > :nth-child(2) {
        flex: 0 0 100%;
    }

    .container.layout-sidebar > .cmp-container > :nth-child(2) {
        position: static;
        top: auto;
    }
}

/* A trailing author drop zone must not take the sidebar's place or width. */
.container.layout-sidebar > .cmp-container > .newpar {
    flex: 0 0 100%;
    position: static;
}
}
@layer utility.generic{

/* Apply these classes to the container wrapper. Choose one per group.
   Width utilities enable a solid border; color and radius work independently. */

/* Thickness */
.border-0 > .cmp-container {
  border-width: 0;
}

.border-1 > .cmp-container {
  border-width: var(--border-size-1, 1px);
  border-style: solid;
}

.border-2 > .cmp-container {
  border-width: var(--border-size-2, 2px);
  border-style: solid;
}

.border-3 > .cmp-container {
  border-width: var(--border-size-3, 3px);
  border-style: solid;
}

.border-4 > .cmp-container {
  border-width: var(--border-size-4, 5px);
  border-style: solid;
}

.border-5 > .cmp-container {
  border-width: var(--border-size-5, 8px);
  border-style: solid;
}

/* Style overrides follow thickness so they can be combined. */
.border-solid > .cmp-container {
  border-style: solid;
}

.border-dashed > .cmp-container {
  border-style: dashed;
}

.border-dotted > .cmp-container {
  border-style: dotted;
}

/* Colors can be customized per brand with the --border-color-* tokens. */
.border-color-primary > .cmp-container {
  border-color: var(--border-color-primary, var(--primary-900, #3b5cad));
}

.border-color-neutral > .cmp-container {
  border-color: var(--border-color-neutral, var(--gray-100, #d6d6d6));
}

.border-color-dark > .cmp-container {
  border-color: var(--border-color-dark, var(--gray-900, #333));
}

.border-color-white > .cmp-container {
  border-color: var(--border-color-white, var(--white, #fff));
}

.border-color-current > .cmp-container {
  border-color: currentcolor;
}

.border-color-transparent > .cmp-container {
  border-color: transparent;
}

/* Radius follows the brand token numbering, which is not a size ranking. */
.border-radius-0 > .cmp-container {
  border-radius: 0;
}

.border-radius-1 > .cmp-container {
  border-radius: var(--radius-size-1, 5px);
}

.border-radius-2 > .cmp-container {
  border-radius: var(--radius-size-2, 20px);
}

.border-radius-3 > .cmp-container {
  border-radius: var(--radius-size-3, 0.5rem);
}

.border-radius-4 > .cmp-container {
  border-radius: var(--radius-size-4, 36px);
}

.border-radius-5 > .cmp-container {
  border-radius: var(--radius-size-5, 45px);
}

.border-radius-full > .cmp-container {
  border-radius: 9999px;
}
}
@layer utility.generic{
/* Pointer cursor for Image components */
.img-cursor-pointer img,
.img-cursor-pointer svg {
  cursor: pointer;
}

/* Aspect Ratio */
.img-ratio-article  img, .img-ratio-article  svg { aspect-ratio: 384 / 171; object-fit: cover; width: 100%; }
.img-ratio-square  img, .img-ratio-square  svg { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.img-ratio-16-9    img, .img-ratio-16-9    svg { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.img-ratio-4-3     img, .img-ratio-4-3     svg { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.img-ratio-3-2     img, .img-ratio-3-2     svg { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.img-ratio-portrait img, .img-ratio-portrait svg { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.img-ratio-adaptive img,
.img-ratio-adaptive svg {
  object-fit: cover;
  width: 100%;
}

@media (min-width: 992px) {
  .img-ratio-adaptive img,
  .img-ratio-adaptive svg {
    aspect-ratio: 406 / 307;
  }
}

@media (min-width: 1200px) {
  .img-ratio-adaptive img,
  .img-ratio-adaptive svg {
    aspect-ratio: 690 / 452;
  }
}
/* Circle crop */
.img-circle img, .img-circle svg { border-radius: 50%; }

/* Object Position */
.img-pos-center img, .img-pos-center svg { object-position: center center; }
.img-pos-top    img, .img-pos-top    svg { object-position: center top; }
.img-pos-bottom img, .img-pos-bottom svg { object-position: center bottom; }
.img-pos-left   img, .img-pos-left   svg { object-position: left center; }
.img-pos-right  img, .img-pos-right  svg { object-position: right center; }

/* Sizing */
.img-full   img, .img-full   svg { width: 100%; height: auto; }
.img-inline img, .img-inline svg { width: auto; max-width: 100%; height: auto; display: inline-block; }
.img-width-initial img, .img-width-initial svg {
  width: initial;
  max-width: 100%; /* still prevents overflow past its container */
  height: auto;
}
}
@layer utility.generic{
.list-reset li {
    padding-left: 0;
}
.list-reset ul > li:before, .list-reset ol > li:before {
    position: relative;
    padding-left: 0;
    width: auto;
    margin-right: var(--size-1);
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.padding-paragraph-none > .cmp-text p, .padding-paragraph-none > .cmp-title p {
    padding-bottom: 0;
}
.links-no-decoration a {
    text-decoration: none;
}
}
@layer utility.generic{

/* Apply utilities to the AEM List component wrapper. Choose one per group. */

.list-reset > .cmp-list {
  padding-inline-start: 0;
}

.list-reset > .cmp-list > .cmp-list__item {
  list-style: none;
}

.list-columns-1 > .cmp-list {
  column-count: 1;
}

.list-columns-2 > .cmp-list {
  column-count: 2;
}

.list-columns-3 > .cmp-list {
  column-count: 3;
}

.list-columns-4 > .cmp-list {
  column-count: 4;
}

/* Reuse the existing typography options for list links and titles. */
.links-no-decoration > .cmp-list .cmp-list__item-link {
  text-decoration: none;
}

.font-orange > .cmp-list,
.font-orange > .cmp-list .cmp-list__item-link,
.font-orange > .cmp-list .cmp-list__item-title {
  color: var(--primaryorg-800);
}

.font-purple > .cmp-list,
.font-purple > .cmp-list .cmp-list__item-link,
.font-purple > .cmp-list .cmp-list__item-title {
  color: #904fd8;
}

.font-red > .cmp-list,
.font-red > .cmp-list .cmp-list__item-link,
.font-red > .cmp-list .cmp-list__item-title {
  color: var(--error-700);
}

.font-green > .cmp-list,
.font-green > .cmp-list .cmp-list__item-link,
.font-green > .cmp-list .cmp-list__item-title {
  color: var(--green-900);
}

.font-blue-medium > .cmp-list,
.font-blue-medium > .cmp-list .cmp-list__item-link,
.font-blue-medium > .cmp-list .cmp-list__item-title {
  color: var(--primary-600);
}

.font-blue-dark > .cmp-list,
.font-blue-dark > .cmp-list .cmp-list__item-link,
.font-blue-dark > .cmp-list .cmp-list__item-title {
  color: var(--primary-900);
}

.font-blue-darker > .cmp-list,
.font-blue-darker > .cmp-list .cmp-list__item-link,
.font-blue-darker > .cmp-list .cmp-list__item-title {
  color: var(--bluedark-900);
}

.font-white > .cmp-list,
.font-white > .cmp-list .cmp-list__item-link,
.font-white > .cmp-list .cmp-list__item-title {
  color: var(--white);
}

.font-gray-light > .cmp-list,
.font-gray-light > .cmp-list .cmp-list__item-link,
.font-gray-light > .cmp-list .cmp-list__item-title {
  color: var(--gray-400);
}

.font-gray-medium > .cmp-list,
.font-gray-medium > .cmp-list .cmp-list__item-link,
.font-gray-medium > .cmp-list .cmp-list__item-title {
  color: var(--gray-600);
}

.font-gray-dark > .cmp-list,
.font-gray-dark > .cmp-list .cmp-list__item-link,
.font-gray-dark > .cmp-list .cmp-list__item-title {
  color: var(--gray-900);
}

/* Match the Travelex text scale, including line heights. */
.text-xs > .cmp-list,
.text-xs > .cmp-list .cmp-list__item-link,
.text-xs > .cmp-list .cmp-list__item-title {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm > .cmp-list,
.text-sm > .cmp-list .cmp-list__item-link,
.text-sm > .cmp-list .cmp-list__item-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base > .cmp-list,
.text-base > .cmp-list .cmp-list__item-link,
.text-base > .cmp-list .cmp-list__item-title {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg > .cmp-list,
.text-lg > .cmp-list .cmp-list__item-link,
.text-lg > .cmp-list .cmp-list__item-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl > .cmp-list,
.text-xl > .cmp-list .cmp-list__item-link,
.text-xl > .cmp-list .cmp-list__item-title {
  font-size: 1.25rem;
  line-height: 1.875rem;
}

.text-2xl > .cmp-list,
.text-2xl > .cmp-list .cmp-list__item-link,
.text-2xl > .cmp-list .cmp-list__item-title {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl > .cmp-list,
.text-3xl > .cmp-list .cmp-list__item-link,
.text-3xl > .cmp-list .cmp-list__item-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl > .cmp-list,
.text-4xl > .cmp-list .cmp-list__item-link,
.text-4xl > .cmp-list .cmp-list__item-title {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl > .cmp-list,
.text-5xl > .cmp-list .cmp-list__item-link,
.text-5xl > .cmp-list .cmp-list__item-title {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl > .cmp-list,
.text-6xl > .cmp-list .cmp-list__item-link,
.text-6xl > .cmp-list .cmp-list__item-title {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl > .cmp-list,
.text-7xl > .cmp-list .cmp-list__item-link,
.text-7xl > .cmp-list .cmp-list__item-title {
  font-size: 4.5rem;
  line-height: 1;
}

.font-weight-narrow > .cmp-list,
.font-weight-narrow > .cmp-list .cmp-list__item-link,
.font-weight-narrow > .cmp-list .cmp-list__item-title {
  font-weight: var(--font-weight-1);
}

.font-weight-regular > .cmp-list,
.font-weight-regular > .cmp-list .cmp-list__item-link,
.font-weight-regular > .cmp-list .cmp-list__item-title {
  font-weight: 400;
}

.font-weight-semi-bold > .cmp-list,
.font-weight-semi-bold > .cmp-list .cmp-list__item-link,
.font-weight-semi-bold > .cmp-list .cmp-list__item-title {
  font-weight: 500;
}

.font-weight-bold > .cmp-list,
.font-weight-bold > .cmp-list .cmp-list__item-link,
.font-weight-bold > .cmp-list .cmp-list__item-title {
  font-weight: 600;
}
}
@layer utility.generic{
@media (max-width: 767px) {
  .u-hide-mobile  { display: none !important; }
  .u-hide-desktop { display: block !important; }
}
@media (min-width: 768px) {
  .u-hide-desktop { display: none !important; }
  .u-hide-mobile  { display: block !important; }
}
@media (width <= 990px) {
  .u-hide-tablet { display: none !important; }
}
.u-hide-all { display: none !important; }
.hide { display: none !important; }

html[style-theme="travelOnApp"] .u-hide-mobile-app { display: none !important; }
}
@layer utility.generic{

.cmp-button:has(> .cmp-button__icon) {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Link-style buttons: underline the label without decorating the icon. */
.btn-icon-link > .cmp-button:has(> .cmp-button__icon),
.cmp-button.btn-icon-link:has(> .cmp-button__icon) {
    text-decoration: none;
}

.btn-icon-link > .cmp-button > .cmp-button__icon,
.cmp-button.btn-icon-link > .cmp-button__icon {
    font-size: 1.2em;
}

.btn-icon-link > .cmp-button:has(> .cmp-button__icon) > .cmp-button__text,
.cmp-button.btn-icon-link:has(> .cmp-button__icon) > .cmp-button__text {
    text-decoration: underline;
}

.btn-icon-right > .cmp-button > .cmp-button__icon,
.cmp-button.btn-icon-right > .cmp-button__icon {
    order: 1;
}

.btn-mobile-w-100 {
    display: flex;
    text-align: center;
}

/* Apply to both Button wrappers in a flex row to share space equally. */
.btn-w-50 {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Links need a non-inline box for width to apply, just like native buttons. */
.btn-w-50 > :is(.cmp-button, .cmp-form-button, a),
.btn-w-50 > .cmp-button-modal > :is(.cmp-button, .cmp-form-button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

:is(.btn-w-100, .btn-w-50) > :is(.cmp-button, .cmp-form-button, a, .cmp-button-modal),
:is(.btn-w-100, .btn-w-50) > .cmp-button-modal > :is(.cmp-button, .cmp-form-button, a) {
    width: 100%;
}

/* Inline modal wrappers need a box that honors the full-width utility. */
:is(.btn-w-100, .btn-w-50) > .cmp-button-modal {
    display: block;
}

@media screen and (width <= 990px) {
    .btn-mobile-w-100,
    .btn-mobile-w-100 > :is(.cmp-button, .cmp-form-button, a, .cmp-button-modal),
    .btn-mobile-w-100 > .cmp-button-modal > :is(.cmp-button, .cmp-form-button, a) {
        width: 100%;
        justify-content: center;
    }

    .btn-mobile-w-100 > .cmp-button-modal {
        display: block;
    }
}
}
@layer utility.generic{
/* Brand variants consume these values without changing layer precedence. */
.btn-sm {
    --button-size-padding: 8px 16px;
    --button-size-font: 1rem;
    --button-size-line-height: 1.25;
    --button-size-gap: 6px;
}

/* Opt-in sizing for regular and form buttons. */
.btn-sm > :is(.cmp-button, .cmp-form-button),
:is(.cmp-button, .cmp-form-button).btn-sm {
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 0.75rem;
    font-size: 1rem;
    line-height: 1.25;
    gap: 6px;
}

.btn-sm > :is(.cmp-button, .cmp-form-button) > :is(.cmp-button__icon, .cmp-form-button__icon),
:is(.cmp-button, .cmp-form-button).btn-sm > :is(.cmp-button__icon, .cmp-form-button__icon) {
    font-size: 1.25rem;
    line-height: 1;
}
}
@layer utility.generic{

/* Icon size and semantic color utilities. */

/* SVG/image sizing: apply to the icon itself or its component wrapper. */
.icon-size-xs {
    --icon-size: 1rem;
}

.icon-size-sm {
    --icon-size: 1.3rem;
}

.icon-size-md {
    --icon-size: 1.5rem;
}

.icon-size-lg {
    --icon-size: 2rem;
}

.icon-size-xl {
    --icon-size: 3rem;
}

:is(.icon-size-xs, .icon-size-sm, .icon-size-md, .icon-size-lg, .icon-size-xl) :is(svg, img),
:is(svg, img):is(.icon-size-xs, .icon-size-sm, .icon-size-md, .icon-size-lg, .icon-size-xl) {
    width: var(--icon-size);
    height: var(--icon-size);
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
}

.icon-inline .material-symbols-rounded,
.material-symbols-rounded.icon-inline {
    display: inline-block;
    font-size: 1.2em;
    vertical-align: middle;
    margin-right: 5px;
}

.icon-sm .material-symbols-rounded {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
}

.icon-md .material-symbols-rounded {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
}

.icon-lg .material-symbols-rounded {
    font-size: 5rem;
    width: 5rem;
    height: 5rem;
}

.icon-xl .material-symbols-rounded {
    font-size: 7rem;
    width: 7rem;
    height: 7rem;
}

.icon-primary .material-symbols-rounded {
    color: var(--icon-primary);
}

.icon-accent .material-symbols-rounded {
    color: var(--icon-accent);
}

.icon-filled .material-symbols-rounded,
.material-symbols-rounded.icon-filled {
    font-variation-settings: "FILL" 1, "wght" 400;
}

.icon-brand .material-symbols-rounded,
.material-symbols-rounded.icon-brand {
    color: var(--icon-brand, currentColor);
}
}
@layer brand {

    /* -------------------------------------------------------------
       QUOTE / NEWSLETTER BANNER — gradient border, self-contained
       -------------------------------------------------------------
       Replaces the border effect that used to be built from sibling
       .left-border / .right-border elements + :has() in travelex.css
       (those rules have been removed there). This version lives
       entirely on the banner's own ::before/::after — no extra
       markup, no :has() dependency on sibling placement. Not yet
       wired into the build (no @import in src/entries/travelex.css).

       Layering (front to back):
         1. in-flow content (title/text)
         2. ::after  — solid fill, clipped to the skewed silhouette
         3. ::before — gradient, offset wider by --line-width so a
                       sliver escapes past ::after's clipped edge,
                       reading as a border tracing the skew.
       ------------------------------------------------------------- */

    #start-quote-banner,
    #newsletter-banner {
        --skew: 16px;
        --line-width: 8px;
        position: relative;
        z-index: 1;
    }

    #start-quote-banner {
        --fill-color: var(--bluedark-900);
        --left-border-color: var(--primary-900);
        --right-border-color: var(--primaryorg-900);
        --tooltip-icon-circle-color: var(--primary-100);
        --tooltip-icon-glyph-color: transparent;
        --tooltip-icon-outer-circle-color: var(--primary-100);
    }

    #newsletter-banner {
        --fill-color: var(--primary-900);
        --left-border-angle: 13deg;
        --right-border-angle: 192deg;
        --left-border-color: var(--green-900);
        --right-border-color: var(--pink-900);
    }

    /* Layout for start-quote-banner only. 3 columns: title, flexible
       search field, button — title and button size to their own
       content (auto) instead of fixed 278px/187px tracks, the search
       column keeps a sane minimum instead of a magic 350px with no
       ceiling, and spacing comes from the --size-* scale instead of
       one-off rem values. Collapses to one column (each item on its
       own line) at 990px and below. */
    #start-quote-banner {
        justify-content: center;
        background-color: transparent !important;
        /* overrides the inline #14295D */
        display: grid;
        align-items: center;
        grid-template-columns: auto minmax(min(350px, 100%), 1fr) auto;
        gap: var(--size-3);
        padding: var(--size-1) var(--size-8);
        margin-top: -30px;
    }

    @media (990px < width < 1080px) {
        #start-quote-banner {
            padding: var(--size-1) var(--size-5);
        }
    }

    #start-quote-banner label {
        font-size: 1.5rem;
        font-weight: 600;
    }

    #start-quote-banner p {
        padding-bottom: 0;
    }

    #start-quote-banner .title+.container {
        grid-column: 2;
    }

    #start-quote-banner .title {
        grid-column: 1;
    }

    #start-quote-banner .container {
        grid-column: 2;
    }

    #start-quote-banner .button {
        grid-column: 3;
    }

    #start-quote-banner .help-message-svg {
        width: 14px;
        height: 14px;
    }

    /* --- Mobile: stack everything in one column --- */
    @media (max-width: 989px) {
        #start-quote-banner {
            grid-template-columns: 1fr;
        }

        #start-quote-button {
            width: 100%;
        }

        #start-quote-banner .cmp-button {
            width: 100%;
        }

        #start-quote-banner .title,
        #start-quote-banner .container,
        #start-quote-banner .button {
            grid-column: unset !important;
        }
    }

    @media (max-width: 990px) {
        #start-quote-banner {
            grid-template-columns: 1fr;
        }

        #start-quote-banner .title+.container {
            grid-column: 1;
        }
    }

    /* Keep the label flexible and the input fixed-width, with validation
       beneath the input. The outer flex layout reserves room for Submit. */
    #newsletter-banner {
        display: flex;
        align-items: start;
        gap: 1.5rem;
        justify-content: center;
        background-color: transparent !important;
        /* overrides the inline #14295D */
        padding: 2rem 4rem;
    }

    #newsletter-banner .text {
        flex: 1;
        min-width: 0;
    }

    #newsletter-banner .cmp-form-text {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
    }

    #newsletter-banner .cmp-form-text > label {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #newsletter-banner .cmp-form-text > label p {
        margin: 0;
    }

    #newsletter-banner .cmp-form-text__text {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #newsletter-banner .cmp-form-text > .customErr {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #newsletter-banner .button {
        flex: 0 0 auto;
    }

    @media (width > 900px) {
        /* Let wrapped copy span the field and validation rows, keeping
           the input and error together at their shared row boundary. */
        #newsletter-banner .cmp-form-text:has(> .customErr) > label {
            grid-row: 1 / 3;
        }

        #newsletter-banner .cmp-form-text:has(> .customErr) > input {
            align-self: end;
        }

        #newsletter-banner .cmp-form-text > .customErr {
            align-self: start;
        }
    }

    @media (max-width: 900px) {
        #newsletter-banner {
            flex-direction: column;
            align-items: stretch;
            gap: var(--size-2);
        }

        #newsletter-banner .cmp-form-text {
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
        }

        #newsletter-banner .cmp-form-text > label,
        #newsletter-banner .cmp-form-text__text,
        #newsletter-banner .cmp-form-text > .customErr {
            grid-column: 1;
            grid-row: auto;
        }

        #newsletter-banner .button {
            width: 100%;
        }

        #newsletter-banner .button .cmp-form-button {
            width: 100%;
        }
    }

    .cmp-experiencefragment--start-quote-banner label[for="multiSelectDropdown"] {
        display: none;
    }

    #start-quote-banner::before,
    #start-quote-banner::after,
    #newsletter-banner::before,
    #newsletter-banner::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        clip-path: polygon(var(--skew) 0,
                100% 0,
                calc(100% - var(--skew)) 100%,
                0 100%);
    }

    #start-quote-banner::after,
    #newsletter-banner::after {
        left: 0;
        right: 0;
        z-index: -1;
        background: var(--fill-color);
    }

    #start-quote-banner::before,
    #newsletter-banner::before {
        left: calc(var(--line-width) * -1);
        right: calc(var(--line-width) * -1);
        z-index: -2;
        background-size: 50% 100%;
        background-repeat: no-repeat;
        background-image:
            linear-gradient(var(--left-border-angle, 0deg), var(--left-border-color), var(--white) 84%),
            linear-gradient(var(--right-border-angle, 180deg), var(--right-border-color), var(--white) 84%);
        background-position: left, right;
    }

    @media (max-width: 990px) {
        #start-quote-banner {
            gap: var(--size-1);
            padding: var(--size-2) 50px;
            margin-top: -85px;
            margin-left: -1rem;
            margin-right: -1rem;
            --skew: 38px;

            & label {
                font-size: 1.25rem;
            }
        }
    }

    /* Mobile: flatten the slant and drop the gradient sliver, go
       edge to edge. Placed after the shared ::before/::after rules
       above (same specificity, so source order decides) — an
       earlier attempt at this same override sat before those shared
       rules and got clobbered by them. */
    @media (max-width: 900px) {
        #newsletter-banner {
            --skew: 0;
        padding: 2rem 1rem;
        margin-left: -2rem;
        margin-right: -2rem;
        }

        #newsletter-banner::before {
            content: none;
        }
    }
}
@layer utility.brand {
    @media (width <= 990px) {
        #featured-banner {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            align-items: center;
            gap: 16px 12px;
        }

        #featured-banner > .text {
            grid-column: 1 / -1;
            text-align: center;
        }

        #featured-banner > .text .cmp-text p {
            /* Override the alignment authored inline in the rich text. */
            /* stylelint-disable-next-line declaration-no-important */
            text-align: center !important;
        }

        #featured-banner > .image {
            grid-column: span 3;
            min-width: 0;
            justify-self: stretch;
        }

        /* The label is the first child; the next three children are logos. */
        #featured-banner > .image:nth-child(-n + 4) {
            grid-column: span 4;
        }

        #featured-banner > .image img {
            display: block;
            max-width: 100%;
            height: auto;
            margin-inline: auto;
        }
    }
}
/* Matches the authored #home-app-callout structure, without generated IDs. */
@layer utility.brand {
  #home-app-callout {
    --app-promo-background: #f8fafd;
    --app-promo-accent: var(--pink-900, #c39);
    --app-promo-phone-width: 36rem;
    --app-promo-overlap: clamp(3rem, 6vw, 6rem);
    --app-promo-slant: 3.5rem;
    --app-promo-band-overhang: 5rem;
    --app-promo-right-inset: max(1rem, calc((100% - var(--site-width-size-5, 1280px)) / 2 - var(--app-promo-band-overhang)));

    position: relative;
    isolation: isolate;

    /* The authored inline background must move onto the decorative band. */
    /* stylelint-disable-next-line declaration-no-important -- Override the supplied inline background color */
    background-color: transparent !important;
  }

  #home-app-callout::before,
  #home-app-callout::after {
    content: "";
    position: absolute;
    inset-block: var(--app-promo-overlap);
    inset-inline: 0;
    inset-inline-end: var(--app-promo-right-inset);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--app-promo-slant)) 100%, 0 100%);
  }

  #home-app-callout::before {
    z-index: -2;
    background: linear-gradient(to bottom, var(--app-promo-accent), var(--app-promo-background));
  }

  #home-app-callout::after {
    z-index: -1;
    inset-inline-end: calc(var(--app-promo-right-inset) + 10px);
    background: var(--app-promo-background);
  }

  #home-app-callout > .container > .cmp-container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 2rem;
    padding-block: 0;
  }

  #home-app-callout > .container > .cmp-container > .container {
    grid-column: auto;
    min-width: 0;
    padding-block: calc(var(--app-promo-overlap) + 2rem);
  }

  /* Only the direct image is the phone artwork; badges stay in the copy. */
  #home-app-callout > .container > .cmp-container > .image {
    grid-column: auto;

    /* Enlarge in flow, with the extra width shared on either side of the track. */
    width: 140%;
    max-width: var(--app-promo-phone-width);
    min-width: 0;
    justify-self: center;
    margin: 0 0 -4rem 0;
  }

  #home-app-callout > .container > .cmp-container > .image .cmp-image__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  #home-app-callout .flex-row > .cmp-container {
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }

  #home-app-callout .flex-row > .cmp-container > .image {
    flex: 0 1 auto;
    max-width: 100%;
  }

  /* Handles both the inline SVG App Store badge and raster Play badge. */
  #home-app-callout .flex-row .cmp-image__image {
    display: block;
    width: auto;
    height: 3.25rem;
    max-width: 100%;
    object-fit: contain;
  }

  @media (width < 990px) {
    #home-app-callout {
      --app-promo-overlap: clamp(3rem, 10vw, 5rem);
      --app-promo-slant: 0rem;
      --app-promo-right-inset: 0px;
      margin-bottom: 6rem;
    }

    /* The mobile band starts behind the phones and continues through the CTAs. */
    #home-app-callout::before {
      content: none;
    }

    #home-app-callout::after {
      inset-block-end: 0;
      inset-inline-end: 0;
    }

    #home-app-callout > .container > .cmp-container {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
      padding-block: 0 2rem;
    }

    #home-app-callout > .container > .cmp-container > .container {
      padding-block: 0;
    }

    #home-app-callout > .container > .cmp-container > .image {
      grid-row: 1;
      width: 100%;
      max-width: 24rem;
      margin: 0 0 -2rem 0;
    }

    #home-app-callout .flex-row > .cmp-container {
      flex-flow: column nowrap;
      gap: 1rem;
      margin-block-start: 1rem;
    }

    #home-app-callout .flex-row > .cmp-container > .button {
      width: 100%;
      margin-block-end: 0.5rem;
    }

    #home-app-callout .flex-row > .cmp-container > .button > .cmp-button {
      display: flex;
      justify-content: center;
      width: 100%;
      text-align: center;
    }
  }
}
@layer brand {

    /** VARIABLE FONTS **********************************************/
    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url(/content/dam/config/branding-stylesheets/travelex/fonts/woff2/Inter-Variable-prod.woff2) format("woff2");
    }

    @font-face {
        font-family: "Inter";
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: url(/content/dam/config/branding-stylesheets/travelex/fonts/woff2/Inter-Italic-VariableFont_opsz,wght.woff2) format("woff2");

    }

    @font-face {
        font-family: "Cormorant Garamond";
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: url(/content/dam/config/branding-stylesheets/travelex/fonts/woff2/CormorantGaramond-Italic-VariableFont_wght.woff2) format("woff2");
    }

}
@media (max-width: 990px) {
  .reviews-carousel > .cmp-container {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1rem 1rem;

    align-items: stretch;
    scroll-marker-group: after;
  }

  .reviews-carousel > .cmp-container::-webkit-scrollbar {
    display: none;
  }

  .trustpilot-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    display: flex;
    flex-direction: column;
    height: auto;
  }

  .trustpilot-card time,
  .trustpilot-card .card-footer {
    margin-top: auto;
  }

  .trustpilot-card::scroll-marker {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b8b8b8;
    border: none;
    margin: 0 4px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .trustpilot-card::scroll-marker:target-current {
    background: #e8663d;
  }

  .reviews-carousel > .cmp-container::scroll-marker-group {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
  }
}
@layer brand {
    .travelex-accordion .cmp-accordion {
         border-top: none;
    }
    .travelex-accordion .cmp-accordion .cmp-accordion__item {
        border-bottom: 1px solid var(--gray-200);
        padding: var(--size-5) 0;
        margin-top: var(--size-2);
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__button {
        color: black;
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 1.875rem;
        display: flex !important;
        /* overrides the default display: block from clientlib */
        padding: 0;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        align-items: center;
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__title {
        flex: 1;
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__button::before {
        position: initial;
        content: "\e147";
        font-family: "Material Symbols Rounded";
        color: var(--primarycta-800);
        font-size: 1.8rem;
        transition: transform 0.2s ease;
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__button.cmp-accordion__button--expanded::before {
        position: initial;
        content: "\e644";
        font-family: "Material Symbols Rounded";
        color: var(--primarycta-800);
        font-size: 1.8rem;
        transform: rotate(180deg);
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__panel {
        display: grid !important;
        grid-template-rows: 0fr;
        padding-top: 0px;
        transition: all 0.35s ease;
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__panel--expanded {
        grid-template-rows: 1fr;
        padding-top: 1rem;
    }

    .travelex-accordion .cmp-accordion .cmp-accordion__panel>* {
        overflow: hidden;
    }

    .travelex-accordion h4 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 1rem;
    }
}
@layer brand {
    .tg-mobile-menu {
        --header-nav-mobile-panel-bg: var(--white);
        --header-nav-mobile-footer-bg: var(--white);
        --header-nav-mobile-footer-link-color: var(--gray-600);
        --header-nav-mobile-close-bg: transparent;
        --header-nav-mobile-close-hover-bg: var(--primary-25);
        --header-nav-mobile-cta-bg: var(--primarycta-700);
        --header-nav-mobile-footer-padding-left: 16px;
    }

    .tg-mobile-menu__panel {
        height: 100vh;
        height: 100dvh;
        max-height: none;
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom, 0);
        overscroll-behavior-y: contain;
        box-shadow: none;
    }

    .tg-mobile-menu__panel > * {
        flex-shrink: 0;
    }

    .tg-mobile-menu__header {
        gap: 12px;
        padding: 12px 16px;
    }

    .tg-mobile-menu__logo {
        display: flex;
        min-width: 0;
        flex: 0 1 232px;
    }

    .tg-mobile-menu__logo img {
        display: block;
        width: 100%;
        max-width: 232px;
        height: auto;
    }

    .tg-mobile-menu__close {
        flex: 0 0 44px;
        border-radius: 0;
    }

    .tg-mobile-menu__close:focus-visible {
        outline: 2px solid var(--primary-800);
        outline-offset: 2px;
    }

    .tg-mobile-menu__list {
        margin: 0;
        padding: 16px 8px;
    }

    .tg-mobile-menu__footer-links {
        margin-top: 0;
        padding: 16px 16px 24px;
        gap: 4px;
    }

    .tg-mobile-menu__footer-links a {
        min-height: 36px;
        gap: 10px;
        font-size: 16px;
        font-weight: 400;
    }

    .tg-mobile-menu__list > li {
        border-bottom: 0;
    }

    .tg-mobile-menu__link,
    .tg-mobile-menu__toggle {
        min-height: 48px;
        padding: 8px 12px;
        border-radius: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tg-mobile-menu .has-dropdown.is-expanded > .tg-mobile-menu__toggle {
        background: var(--primary-25);
    }

    .tg-mobile-menu__submenu {
        border-radius: 10px;
    }

    .tg-mobile-menu .has-dropdown.is-expanded .tg-mobile-menu__submenu {
        margin-block: 8px;
        border: 1px solid var(--gray-25);
        box-shadow: 0 8px 24px rgb(20 41 93 / 8%);

        /* Long or wrapped menus remain reachable within the panel. */
        overflow-y: auto;
    }

    .tg-mobile-menu__submenu a {
        min-height: 56px;
        padding: 16px 28px;
        box-sizing: border-box;
        border-left: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tg-mobile-menu__submenu a:hover,
    .tg-mobile-menu__submenu a:focus {
        background: var(--primary-25);
    }
}
/* @import "./mobile-summary.css"; */
/* Text-like input: apply to the Form Text wrapper or .cmp-form-text itself. */
:is(.input-as-text.cmp-form-text, .input-as-text .cmp-form-text) > input.cmp-form-text__text,
:is(.input-as-text.cmp-form-text, .input-as-text .cmp-form-text) > input.cmp-form-text__text:is([readonly], :disabled, :hover, :focus) {
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    -webkit-text-fill-color: currentcolor;
    opacity: 1;
    font: inherit;
}

:is(.input-as-text.cmp-form-text, .input-as-text .cmp-form-text) > input.cmp-form-text__text:is([readonly], :disabled) {
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
Datepicker UI   
--------------------------------------------------------------------------- */
.ui-datepicker {
    border: 1px solid #74869f;
    background-color: white;
}
.ui-datepicker .ui-datepicker-header {
    background-color: white;
    border: 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
    height: 19px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon {
    background: 0;
    font-weight: 600;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before {
    font-family: Hinge Icons;
    font-size: 1rem;
    position: absolute;
    text-indent: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #1352de;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
    font-weight: 600;
    border: 0;
    background-color: transparent;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before {
    content: "\eac9";
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before {
    content: "\eacb";
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    display: flex;
    height: 1.8em;
    color: #001871;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    cursor: pointer;
    margin: 0 15px;
    box-sizing: border-box;
    font-size: 0.778rem;
}
.ui-datepicker
    .ui-datepicker-header
    .ui-datepicker-title
    select:nth-of-type(1) {
    margin: 0 10px 0 0;
}
.ui-datepicker
    .ui-datepicker-header
    .ui-datepicker-title
    select:nth-of-type(2) {
    margin: 0 0 0 10px;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    border: 0;
    text-align: center;
    cursor: pointer;
    color: #001871;
    background-color: transparent;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover {
    background-color: #001871;
    color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active {
    background-color: #1352de;
    color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight {
    background-color: #a1baf2;
}
.ui-datepicker .ui-datepicker-calendar thead span {
    color: #1352de;
}
input.hasDatepicker {
    background: #fff
        url(/content/dam/config/branding-stylesheets/travelex/icons/calendar.svg)
        no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}
input.datePickerIcon {
    background: #fff
        url(/content/dam/config/branding-stylesheets/travelex/icons/calendar.svg)
        no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}
.ui-widget-header select {
    padding: 4px 8px;
    background-position: right center;
}
/* ---------------------------------------------------------------------------
Datepicker UI - Travelex Customizations   
--------------------------------------------------------------------------- */
.ui-widget.ui-widget-content {
    padding: 1rem;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .1), 0 -5px 8px -2px rgba(16, 24, 40, .05);
    margin-top: 10px;
    font-size: 1.2rem;
}

/* Two-month desktop layout; single-month calendars retain their spacing. */
@media (width >= 992px) {
    .ui-datepicker.ui-widget.ui-widget-content.ui-datepicker-multi-2:has(> .ui-datepicker-group-first + .ui-datepicker-group-last) {
        padding: 0;

        > .ui-datepicker-group {
            padding: 1rem;
            box-sizing: border-box;
        }

        > .ui-datepicker-group-first {
            border-right: 1px solid var(--gray-400);
        }
    }
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight {
    background-color: transparent;
    border: 1px solid var(--primary-900);
    color: var(--primary-900);
}
.ui-datepicker .ui-datepicker-calendar thead span {
    color: var(--primary-900);
    font-weight: 500;
    font-size: 1rem;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    border: 0;
    text-align: center;
    cursor: pointer;
    color: #001871;
    background-color: transparent;
    height: 40px;
    font-size: 1rem;
    width: 40px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active {
    background-color: var(--primary-900);
    color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover {
    background-color: var(--primary-900);
    color: #fff;
}
.ui-widget-header select {
    padding: 4px 8px;
    background-position: calc(100% - 10px);
    background-size: 10px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before {
    font-family: Hinge Icons;
    font-size: 1.2rem;
    position: absolute;
    text-indent: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--primarycta-800);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
Currency Field Icon   
--------------------------------------------------------------------------- */
/* Give the input and icon a shared row so errors cannot shift the icon. */
.cmp-form-text:has(input[data-formatcurrency="true"]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.cmp-form-text:has(input[data-formatcurrency="true"]) > * {
    grid-column: 1 / -1;
}

.cmp-form-text:has(input[data-formatcurrency="true"]) > label {
    grid-area: 1 / 1;
}

.cmp-form-text:has(input[data-formatcurrency="true"]) > .info-tooltip-button {
    grid-area: 1 / 2;
    align-self: center;
}

/* Preserve the brand's Material Symbols Rounded currency glyph. */
.cmp-form-text:has(input[data-formatcurrency="true"])::before {
    content: "attach_money";
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin-left: 1rem;
    font-family: "Material Symbols Rounded";
    font-size: 1.25rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    z-index: 1;
}

.cmp-form-text input[data-formatcurrency="true"] {
    grid-row: 2;
    min-width: 0;
    padding-left: 2.75rem;
}

/* Radio tiles: author-applied to the Options component wrapper. */
.radio-tiles .cmp-form-options--radio {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__legend {
    margin-bottom: 12px;
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    min-height: 48px;
    min-width: min(160px, 100%);
    max-width: 100%;
    padding: 12px 18px;
    margin: 0 12px 12px 0;
    border: 1px solid var(--gray-300, #adadad);
    border-radius: 12px;
    background: #fff;
    color: var(--gray-900, #333);
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
    justify-content: center;
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label:hover {
    border-color: var(--primary-700, #627dbe);
    background: var(--primary-25, #f5f7fb);
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label:has(input:checked) {
    border-color: var(--primary-700, #627dbe);
    background: var(--primary-50, #ebeff7);
    color: var(--primary-900, #3b5cad);
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label:has(input:focus-visible) {
    outline: 2px solid var(--primary-700, #627dbe);
    outline-offset: 3px;
}

.radio-tiles .cmp-form-options--radio input[type="radio"] {
    display: none;
}

.radio-tiles .cmp-form-options--radio .cmp-form-options__field-description {
    min-width: 0;
}

.radio-tiles .cmp-form-options--radio .cmp-form-options__field-description,
.radio-tiles .cmp-form-options--radio .cmp-form-options__field-description p {
    margin: 0;
    padding: 0;
}

.radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (width < 786px) {
    .radio-tiles .cmp-form-options--radio {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .radio-tiles .cmp-form-options--radio > .cmp-form-options__field-label {
        min-width: 0;
        flex-grow: 1;
        justify-content: center;
        margin: 0;
    }
}
/* Display checkbox as toggle: author-applied to the Options component wrapper. */
.toggle-native .cmp-form-options.cmp-form-options--checkbox>label, .cmp-form-options.cmp-form-options--radio>label {
    padding: 0;
    margin: 0;
}

  .toggle-native {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .toggle-native .cmp-form-options--checkbox {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  /* legend has special browser rendering tied to the fieldset border and
     won't reliably respect flex order on its own — display:contents removes
     its box so the inner .rte-wrap becomes the real flex item instead */
  .toggle-native .cmp-form-options__legend {
    display: contents;
  }

  .toggle-native .cmp-form-options__legend .rte-wrap {
    order: 2;
  }

  .toggle-native .cmp-form-options__legend .rte-wrap p {
    margin: 0;
    font-weight: 500;
    text-align: left;
    color: var(--gray-700);
  }

  .toggle-native .cmp-form-options__field-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    order: 1;
  }

  /* Visually hide the "Yes" text but keep it available to screen readers */
  .toggle-native .cmp-form-options__field-description {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Turn the checkbox itself into a toggle switch */
  .toggle-native .cmp-form-options__field--checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 48px;
    height: 26px;
    margin: 0;
    background-color: #ccc;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    border: none;
  }
  .toggle-native input[type="checkbox"]:checked:after {
         content: "";
    }

  .toggle-native .cmp-form-options__field--checkbox::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .toggle-native .cmp-form-options__field--checkbox:checked {
    background-color: var(--primary-900);
  }

  .toggle-native .cmp-form-options__field--checkbox:checked::before {
    transform: translateX(22px);
  }

  .toggle-native .cmp-form-options__field--checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ------------------------------------------------------------------ */

/* Multi-month layout (the default jQuery UI theme includes these;     */

/* add them if your custom theme stripped them out)                    */

/* ------------------------------------------------------------------ */

.ui-datepicker-multi {

    width: auto !important;

}

.ui-datepicker-multi .ui-datepicker-group {

    float: left;

}

.ui-datepicker-multi-2 .ui-datepicker-group {

    width: 50%;

}

.ui-datepicker-multi .ui-datepicker-group table {

    width: 95%;

    margin: 0 auto 0.4em;

}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-calendar {

    border-left-width: 0;

}

.ui-datepicker-multi .ui-datepicker-buttonpane {

    clear: left;

}
 
/* In multi-month mode the month/year dropdowns sit in every header and the

   panel needs a sensible minimum width so it doesn't collapse on small screens */

#ui-datepicker-div.ui-datepicker-multi-2 {

    min-width: 560px;

    max-width: calc(100vw - 16px);

}
 
/* ------------------------------------------------------------------ */

/* Trip range highlighting                                             */

/* ------------------------------------------------------------------ */
 
/* days between departure and return: light band across the full cell */

.ui-datepicker td.range-middle {

    background: var(--primary-25);

}

.ui-datepicker td.range-middle a.ui-state-default {

    background: transparent;

    border-color: transparent;

    color: #0b3b66;

}
 
/* departure and return dates: solid ends */

.ui-datepicker td.range-start a.ui-state-default,

.ui-datepicker td.range-end a.ui-state-default {

    background: var(--primary-900);

    border-color: var(--primary-900);

    color: #fff;

}
 
/* connect the ends to the band (only when both dates are chosen) */

.ui-datepicker td.range-start:not(.range-solo) {

    background: linear-gradient(to right, transparent 50%, var(--primary-25) 50%);

}

.ui-datepicker td.range-end {

    background: linear-gradient(to left, transparent 50%, var(--primary-25) 50%);

}
 
/* ------------------------------------------------------------------ */

/* Hover preview: departure -> day under the mouse                     */

/* ------------------------------------------------------------------ */

/* Selected range = solid band. Hover preview = hatched band, so the two are

   distinguishable even where they overlap. */

.ui-datepicker td.range-hover {

    background: repeating-linear-gradient(135deg, #eef6fe 0, #eef6fe 4px, #c5dcf2 4px, #c5dcf2 8px);

}

.ui-datepicker td.range-hover a.ui-state-default {

    background: transparent;

    border-color: transparent;

}
 
/* the hovered day acts as a tentative end: hollow dashed ring vs. the solid

   filled circle used for a confirmed start/end */

.ui-datepicker td.range-hover-end {

    background: repeating-linear-gradient(135deg, #eef6fe 0, #eef6fe 4px, #c5dcf2 4px, #c5dcf2 8px) left / 50% 100% no-repeat;

}

.ui-datepicker td.range-hover-end a.ui-state-default {

    background: #fff;

    border: 2px dashed #0070c9;

    color: #0070c9;

}
 
/* the departure cell connects to the preview band even before a return date exists */

.ui-datepicker td.range-start.range-solo {

    background: repeating-linear-gradient(135deg, #eef6fe 0, #eef6fe 4px, #c5dcf2 4px, #c5dcf2 8px) right / 50% 100% no-repeat;

}
@layer utility.brand {
  /* Generated rental-car date rows share one set of column widths. */
  .upgrade-card [id="selected-dates"] > .container {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    gap: 0 1.5rem;
  }

  /* Preserve the cloning template in the DOM without a blank grid row. */
  .upgrade-card [id="date-template"] {
    display: none;
  }

  .upgrade-card .cmp-container[id^="rvd-date"] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
    column-gap: inherit;
    row-gap: 0;
  }

  .upgrade-card .cmp-container[id^="rvd-date"] > .text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .upgrade-card .cmp-container[id^="rvd-date"] > .button {
    justify-self: start;
  }

  .upgrade-card hr {
    border-top: 1px solid var(--gray-200) !important;
    margin: 0 -15px 2rem;
  }

  /* One authored class. Parts are identified by existing component hooks.
   Only the row, summary and identity wrappers are flattened; controls keep their boxes. */
  .upgrade-card > .cmp-container {
    --upgrade-padding: var(--size-2, 15px);
    --upgrade-radius: var(--size-2, 15px);
    --upgrade-action-radius: 0 0 var(--upgrade-radius) var(--upgrade-radius);

    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "icon icon"
      "details price"
      "coverage coverage"
      "action action";
    column-gap: 1rem;
    align-items: start;
    padding: 0;
    text-align: start;
  }

  /* Flatten only row, summary and identity wrappers, identified by their immediate component branches. */

  .upgrade-card .container:has(> .cmp-container > .container > .cmp-container > .checkbox-primary-inverse),
  .upgrade-card .cmp-container:has(> .container > .cmp-container > .checkbox-primary-inverse),
  .upgrade-card .container:has(> .cmp-container > .text > [id="upgrade-cost-wording"]),
  .upgrade-card .cmp-container:has(> .text > [id="upgrade-cost-wording"]),
  .upgrade-card .container:has(> .cmp-container > .image > [id="productDisplayOptionalImage"]),
  .upgrade-card .cmp-container:has(> .image > [id="productDisplayOptionalImage"]) {
    display: contents;
  }

  .upgrade-card .image:has(> [id="productDisplayOptionalImage"]) {
    grid-area: icon;
    width: var(--upgrade-icon-size, 2rem);
    margin: var(--upgrade-padding);
  }

  .upgrade-card [id="productDisplayOptionalImage"] .cmp-image__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .upgrade-card .container:has(> .cmp-container > .accordion-link) {
    grid-area: details;
    min-width: 0;
    margin: 0 0 var(--upgrade-padding) var(--upgrade-padding);
  }

  .upgrade-card .cmp-container:has(> .accordion-link) {
    display: grid;
    gap: 0;
  }

  @media (width >= 990px) {
    .upgrade-card .container:has(> .cmp-container > .accordion-link) {
      margin: var(--upgrade-padding) 0;
    }
  }

  .upgrade-card .text:has(> [id="upgrade-cost-wording"]) {
    grid-area: price;
    min-width: 0;
    margin: 0 var(--upgrade-padding) var(--upgrade-padding) 0;
    text-align: end;
  }

  .upgrade-card [id="upgrade-cost-wording"] p {
    margin: 0;
    padding: 0;
  }

  @media (width >= 990px) {
    .upgrade-card .text:has(> [id="upgrade-cost-wording"]) {
      margin: var(--upgrade-padding) 0;
    }
  }

  /* Action: preserve the native checkbox and its label. */
  .upgrade-card .container:has(> .cmp-container > .checkbox-primary-inverse) {
    grid-area: action;
    min-width: 0;
    padding: var(--upgrade-padding);
  }

  .upgrade-card .checkbox-primary-inverse .cmp-form-options, .upgrade-card .checkbox-primary-inverse .cmp-form-options__field-label, .upgrade-card .checkbox-primary-inverse .cmp-form-options__field-description {
    box-sizing: border-box;
    min-width: 0;
  }

  .upgrade-card .checkbox-primary-inverse .cmp-form-options__field-description {
    justify-content: center;
  }

  @media (width < 990px) {
    .upgrade-card .checkbox-primary-inverse .cmp-form-options, .upgrade-card .checkbox-primary-inverse .cmp-form-options__field-label, .upgrade-card .checkbox-primary-inverse .cmp-form-options__field-description {
      width: 100%;
    }
  }

  .upgrade-card .container:has(> .cmp-container > .checkbox-primary-inverse input[name$="_addOn"]:checked) {
    display: grid;
    align-self: stretch;
    padding: 0;
    border-radius: var(--upgrade-action-radius);
    background: var(--primarycta-800, #ef6927);

  & > .cmp-container, & .options, & .cmp-form-options, & .cmp-form-options__field-label {
    display: grid;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  & .cmp-form-options__field-description {
    width: 100%;
    min-height: 5rem;
    padding: var(--upgrade-padding) 1.5rem;
    border: 0;
    border-radius: var(--upgrade-action-radius);
    background: var(--primarycta-800, #ef6927);
    color: #fff;
  }
  }

  .upgrade-card .checkbox-primary-inverse input[name$="_addOn"]:checked + .cmp-form-options__field-description::before {
    content: "\e5ca";
    font-family: "Material Symbols Rounded", sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
  }

  /* Optional coverage wrapper retains AEM's .hide / [hidden] behavior. */
  .upgrade-card > .cmp-container > .container:has(> .cmp-container[id$="_parameters"]) {
    grid-area: coverage;
    min-width: 0;
    padding: 0 var(--upgrade-padding) var(--upgrade-padding);
  }

  .upgrade-card .cmp-container[id$="_parameters"] .cmp-form-options--drop-down, .upgrade-card .cmp-container[id$="_parameters"] .cmp-form-options__field--drop-down {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  @media (width >= 990px) {
    .upgrade-card > .cmp-container {
      --upgrade-action-radius: 0 var(--upgrade-radius) var(--upgrade-radius) 0;

      grid-template-columns: calc(var(--upgrade-icon-size, 2rem) + var(--upgrade-padding)) minmax(0, 1fr) max-content max-content;
      grid-template-areas: "icon details price action"
        "coverage coverage coverage coverage";

      /* Visible parameter sections include both coverage dropdowns and rental-car dates. */
    }

    .upgrade-card > .cmp-container:has(> .container:not(.hide, .u-hide-all, [hidden]) > .cmp-container[id$="_parameters"]:not(.hide, .u-hide-all, [hidden])) {
      --upgrade-action-radius: 0 var(--upgrade-radius) 0 0;
    }
  }
}
@layer utility.brand {
  .plan-comparison-instance .table-footer {
    /* Override the spacing supplied inline by the footer markup. */
    /* stylelint-disable-next-line declaration-no-important */
    padding: 0 !important;
    color: var(--white);
    background: var(--bluedark-700);
  }

  .plan-comparison-instance .footer-label {
    padding: 18px 24px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .plan-comparison-instance .footer-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-width: 0;
    padding: 16px 12px 8px;
    text-align: center;

    /* Keep every tier consistent with the first cell's inline styles. */
    /* stylelint-disable-next-line declaration-no-important */
    row-gap: 16px !important;
  }

  /* The label is the first child; the middle plan is the third child. */
  .plan-comparison-instance .footer-value:nth-child(3) {
    background: var(--bluedark-900);
  }

  .plan-comparison-instance .footer-value .cell-title {
    margin: 0;
    color: var(--white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  .plan-comparison-instance .footer-value .tier-cta-btn {
    display: flex;
    justify-content: center;
    flex-grow: 0;
    margin: 0;
  }

  .plan-comparison-instance .footer-value .cmp-form-button {
    box-sizing: border-box;
    width: 100%;
    max-width: 134px;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--primarycta-800);
    color: var(--white);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
  }

  .plan-comparison-instance .footer-value .cmp-form-button:hover {
    background: var(--primarycta-900);
  }

  .plan-comparison-instance .footer-value .cmp-form-button:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
  }

  @media (width <= 700px) {
    .plan-comparison-instance .footer-label {
      grid-column: 1 / -1;
      padding: 6px 10px;
      border-bottom: 1px solid var(--white);
      background: var(--primary-700);
      font-size: 1rem;
      font-weight: 600;
    }

    .plan-comparison-instance .footer-value {
      padding: 0;
      background: var(--primary-800);

      /* Override the inline gap so the two color bands meet. */
      /* stylelint-disable-next-line declaration-no-important */
      row-gap: 0 !important;
    }

    .plan-comparison-instance .footer-value:nth-child(3) {
      background: var(--primary-600);
    }

    .plan-comparison-instance .footer-value .cell-title {
      padding: 12px 4px;
      background: var(--primary-900);
      font-size: clamp(1.125rem, 5.5vw, 2rem);
    }

    .plan-comparison-instance .footer-value:nth-child(3) .cell-title {
      background: var(--primary-700);
    }

    .plan-comparison-instance .footer-value .tier-cta-btn {
      padding: 12px 8px;
    }

    .plan-comparison-instance .footer-value .cmp-form-button {
      width: auto;
      max-width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 1rem;
    }
  }

  .plan-comparison-instance .footer-value:has(.tier-cta-btn.selected) {
    padding-inline: 0;
    padding-bottom: 0;
  }

  .plan-comparison-instance .footer-value .tier-cta-btn.selected {
    width: 100%;
    flex-grow: 1;
    padding: 0;
  }

  .plan-comparison-instance .footer-value .tier-cta-btn.selected > button {
    width: 100%;
    max-width: none;
    flex-grow: 1;
  }

  .plan-comparison-instance .cell.tier-name:has(.tier-cta-btn.selected) {
    padding: 0;
  }

  .plan-comparison-instance .tier-cta-btn.selected > button {
    border-radius: 0 !important;
    line-height: 2;
  }

  .plan-comparison-instance .tier-cta-btn.selected > button::before {
    content: "check";
    font-family: "Material Symbols Rounded", sans-serif;
    margin-right: 5px;
  }

  .plan-comparison-instance .tier-cta-btn.selected {
    flex-grow: 1;
  }

  .plan-comparison-instance .cell.tier-name:has(.tier-cta-btn.selected) .cell-title {
    padding: var(--size-2) 0 0;
  }
}
/* stylelint-disable selector-id-pattern -- Matches the existing AEM component ID. */
@layer brand {
    #progressNav li::before {
        font-size: 1rem;
        line-height: 1;
    }

    #progressNav li:not(.current):has(~ .current)::before {
        background: var(--green-900, #9c6);
        color: var(--progress-nav-active-text-color, #fff);
        content: "check";
        font-family: "Material Symbols Rounded", sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        font-feature-settings: "liga";
    }

    #progressNav li::after,
    #progressNav li > .step-progress-fill {
        height: 2px;
    }

    #progressNav ol.vertical li::after,
    #progressNav ol.vertical li > .step-progress-fill {
        width: 2px;
        height: calc(100% - 1rem);
        left: calc(var(--progress-nav-circle-size) / 2 - 1px);
    }

    /* Extend existing step links over the circles without changing navigation. */
    #progressNav li > a[href]:not([aria-disabled="true"]) {
        position: static;
    }

    #progressNav li > a[href]:not([aria-disabled="true"])::after {
        content: "";
        position: absolute;
        top: calc((var(--progress-nav-circle-size) - 44px) / 2);
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translateX(-50%);
        border-radius: 50%;
        cursor: pointer;
        z-index: 3;
    }

    #progressNav ol.vertical li > a[href]:not([aria-disabled="true"])::after {
        top: calc(1rem + (var(--progress-nav-circle-size) - 44px) / 2);
        left: calc(var(--progress-nav-circle-size) / 2);
    }

    #progressNav li:has(> a:focus-visible)::before {
        outline: 2px solid var(--progress-nav-active-color);
        outline-offset: 3px;
    }

    @media (width <= 767px) {
        /* Keep link names available to assistive technology while hiding labels. */
        #progressNav li:not(.current),
        #progressNav li:not(.current) * {
            font-size: 0;
        }
    }
}

@layer brand {

    :root {
        /* CSS card carousel pagination */
        --carousel-dot-active-color: #ff6720;
        --carousel-dot-inactive-color: #888;

        /** FONT FAMILY **********************************************/
        --font-family-1: "Inter", Arial, sans-serif;
        --font-family-2: "Cormorant Garamond", sans-serif;

        /** FONT SIZES **********************************************/
        --font-size-1: 0.667rem;
        /* 12px */
        --font-size-2: 0.778rem;
        /* 14px */
        --font-size-3: 0.889rem;
        /* 16px */
        --font-size-4: 1rem;
        /* 18px */
        --font-size-5: 1.167rem;
        /* 21px */
        --font-size-6: 1.333rem;
        /* 24px */
        --font-size-7: 1.611rem;
        /* 29px */
        --font-size-8: 2.111rem;
        /* 38px */
        --font-size-9: 2.667rem;
        /* 48px */
        --font-size-10: 3.333rem;
        /* 60px */

        --font-size-base: 16px;
        /* dont list in utility classes, used on <html> element to set base */

        /** FONT WEIGHT **********************************************/
        --font-weight-1: 300;
        --font-weight-2: 400;
        --font-weight-3: 600;
        --font-weight-4: 700;
        --font-weight-5: 800;

        /** LINE HEIGHT **********************************************/
        --line-height-1: 0.667rem;
        /* 12px */
        --line-height-2: 0.778rem;
        /* 14px */
        --line-height-3: 0.889rem;
        /* 16px */
        --line-height-4: 1rem;
        /* 18px */
        --line-height-5: 1.167rem;
        /* 21px */
        --line-height-6: 1.333rem;
        /* 24px */
        --line-height-7: 1.611rem;
        /* 29px */
        --line-height-8: 2.111rem;
        /* 38px */
        --line-height-9: 2.667rem;
        /* 48px */
        --line-height-10: 3.333rem;
        /* 60px */

        /** SIZES: Padding/Margin/Gaps ***********************************/
        --size-1: 10px;
        /* .7rem */
        --size-2: 15px;
        /* .8rem */
        --size-3: 20px;
        /* 1rem */
        --size-4: 25px;
        /* 1.2rem */
        --size-5: 30px;
        /* 1.5rem */
        --size-6: 40px;
        /* 2rem */
        --size-7: 60px;
        /* 3rem */
        --size-8: 80px;
        /* 4rem */
        --button-padding: var(--size-2) var(--size-5);

        /** BORDER RADIUS *******************************************/
        --radius-size-1: 5px;
        --radius-size-2: 20px;
        --radius-size-3: 0.5rem;
        --radius-size-4: 36px;
        --radius-size-5: 45px;

        /** BORDER SIZE ************************************/
        --border-size-1: 1px;
        --border-size-2: 2px;
        --border-size-3: 3px;
        --border-size-4: 5px;
        --border-size-5: 8px;

        /** BORDER COLOR ***********************************/
        --border-color-neutral: var(--gray-200);

        /** SITE WIDTH - Min/Max-Width ***********************************/
        /* YUI compressor bug minifies "..2) + 50.." down to "..2)+50.." which breaks browser calc, use double negatives as temp fix */
        --site-width-gutter: 2rem;
        --site-width-size-1: calc((var(--site-width-gutter) * 2) - -500px);
        --site-width-size-2: calc((var(--site-width-gutter) * 2) - -700px);
        --site-width-size-3: calc((var(--site-width-gutter) * 2) - -900px);
        --site-width-size-4: calc((var(--site-width-gutter) * 2) - -1100px);
        --site-width-size-5: 1280px;

        /* Travelex Design System Variables */
        --transparent: transparent;
        --white: #fff;
        --black: #000;
        --gray-25: #f5f5f5;
        --gray-50: #ebebeb;
        --gray-100: #d6d6d6;
        --gray-200: #c2c2c2;
        --gray-300: #adadad;
        --gray-400: #999;
        --gray-500: #858585;
        --gray-600: #707070;
        --gray-700: #5c5c5c;
        --gray-800: #474747;
        --gray-900: #333;
        --primaryorg-25: #fff0e8;
        --primaryorg-50: #ffe1d1;
        --primaryorg-100: #ffd1bb;
        --primaryorg-200: #ffc2a4;
        --primaryorg-300: #ffb38d;
        --primaryorg-400: #ffa476;
        --primaryorg-500: #ff955f;
        --primaryorg-600: #ff8d54;
        --primaryorg-700: #ff8549;
        --primaryorg-800: #ff7632;
        --primaryorg-900: #ff671b;
        --primarycta-25: #fef7f4;
        --primarycta-50: #feefe9;
        --primarycta-100: #fcdfd4;
        --primarycta-200: #fbd0be;
        --primarycta-300: #f9c0a9;
        --primarycta-400: #f8b193;
        --primarycta-500: #f6a17d;
        --primarycta-600: #f49168;
        --primarycta-700: #f38152;
        --primarycta-800: #e7692f;
        --primarycta-900: #c2450d;
        --primary-25: #f5f7fb;
        --primary-50: #ebeff7;
        --primary-100: #d8deef;
        --primary-200: #c4cee6;
        --primary-300: #b1bede;
        --primary-400: #9daed6;
        --primary-500: #899dce;
        --primary-600: #7289c5;
        --primary-700: #627dbe;
        --primary-800: #4f6cb5;
        --primary-900: #3b5cad;
        --error-25: #fffbfa;
        --error-50: #fef3f2;
        --error-100: #fee4e2;
        --error-200: #fecdca;
        --error-300: #fda29b;
        --error-400: #f97066;
        --error-500: #f04438;
        --error-600: #d92d20;
        --error-700: #b42318;
        --error-800: #912018;
        --error-900: #7a271a;
        --warning-25: #fffcf5;
        --warning-50: #fffaeb;
        --warning-100: #fef0c7;
        --warning-200: #fedf89;
        --warning-300: #fec84b;
        --warning-400: #fdb022;
        --warning-500: #f79009;
        --warning-600: #dc6803;
        --warning-700: #b54708;
        --warning-800: #93370d;
        --warning-900: #7a2e0e;
        --success-25: #f6fef9;
        --success-50: #ecfdf3;
        --success-100: #d1fadf;
        --success-200: #a6f4c5;
        --success-300: #6ce9a6;
        --success-400: #32d583;
        --success-500: #12b76a;
        --success-600: #039855;
        --success-700: #027a48;
        --success-800: #05603a;
        --success-900: #054f31;
        --blue-light-25: #f8fafd;
        --blue-light-50: #f2f6fc;
        --blue-light-100: #e5edf8;
        --blue-light-200: #d7e3f5;
        --blue-light-300: #cadaf1;
        --blue-light-400: #bdd1ee;
        --blue-light-500: #b0c8ea;
        --blue-light-600: #a3bfe6;
        --blue-light-700: #95b5e3;
        --blue-light-800: #88acdf;
        --blue-light-900: #7ba3dc;
        --bluedark-25: #f3f4f7;
        --bluedark-50: #e7eaef;
        --bluedark-100: #d0d4df;
        --bluedark-200: #b9bfce;
        --bluedark-300: #a1a9be;
        --bluedark-400: #8994ae;
        --bluedark-500: #727f9e;
        --bluedark-600: #5a698e;
        --bluedark-700: #43547d;
        --bluedark-800: #2c3e6d;
        --bluedark-900: #14295d;
        --primarycta-dark-25: #ecb79d;
        --primarycta-dark-50: #eaaf92;
        --primarycta-dark-100: #e8a686;
        --primarycta-dark-200: #e59c79;
        --primarycta-dark-300: #e2916a;
        --primarycta-dark-400: #df8559;
        --primarycta-dark-500: #dc7846;
        --primarycta-dark-600: #d86931;
        --primarycta-dark-700: #d4581a;
        --primarycta-dark-800: #cf4500;
        --primarycta-dark-900: #c1470a;
        --beige-25: #fdfdfa;
        --beige-50: #fbfbf9;
        --beige-100: #f5f5eb;
        --beige-200: #f0f0e0;
        --beige-300: #ebebd6;
        --beige-400: #e5e5cc;
        --beige-500: #e0e0c2;
        --beige-600: #dbdbb8;
        --beige-700: #d6d6ad;
        --beige-800: #d1d1a3;
        --beige-900: #cc9;
        --pink-25: #fdf5fa;
        --pink-50: #faebf5;
        --pink-100: #f5d6eb;
        --pink-200: #f0c2e0;
        --pink-300: #ebadd6;
        --pink-400: #e599cc;
        --pink-500: #e085c2;
        --pink-600: #db70b8;
        --pink-700: #d65cad;
        --pink-800: #d147a3;
        --pink-900: #c39;

        /* Icon utility semantic colors */
        --icon-primary: var(--primary-900);
        --icon-accent: var(--pink-900);
        --icon-brand: var(--primaryorg-900);
        --green-25: #fafdf7;
        --green-50: #f9fcf6;
        --green-100: #ebf5e0;
        --green-200: #e0f0d1;
        --green-300: #d6ebc2;
        --green-400: #cce5b3;
        --green-500: #c2e0a3;
        --green-600: #b8db94;
        --green-700: #add685;
        --green-800: #a3d175;
        --green-900: #9c6;

        --brand-drop-shadow: drop-shadow(0 -5px 8px rgba(16, 24, 40, 0.05)) drop-shadow(0 20px 24px rgba(16, 24, 40, 0.1));

        --card-bg: var(--blue-light-25);
        --card-shadow: 0px -5px 8px -2px rgba(16, 24, 40, .05), 0px 20px 24px -4px rgba(16, 24, 40, .1);

        /** Accordion (base.components defaults tokenized here) **/
        --accordion-border-color: var(--blue-light-50);
        --accordion-item-padding-y: var(--size-5);
        --accordion-button-font-size: var(--font-size-6);
        --accordion-button-color: var(--primary-700);
        --accordion-button-font-weight: var(--font-weight-3);
        --accordion-icon-color: var(--primary-700);

        /** API error banner (base.components defaults tokenized here) **/
        --api-error-padding: var(--size-3);
        --api-error-accent-color: var(--error-600);
        --api-error-radius: var(--radius-size-1);
        --api-error-margin: var(--size-3) 0;
        --api-error-bg: var(--error-100);

        /** Tooltip (base.components defaults tokenized here) **/
        --tooltip-icon-circle-color: var(--primary-400);
        --tooltip-icon-glyph-color: var(--white);
        --tooltip-icon-outer-circle-color: var(--white);
        --tooltip-modal-bg: var(--white);

        /** Repeatable-container button (base.components default tokenized here) **/
        --repeatable-btn-color: var(--bluedark-900);

        /** Datepicker (base.components defaults tokenized here) **/
        --datepicker-primary-color: var(--primary-900);
        --datepicker-accent-color: var(--primary-700);
        --datepicker-highlight-bg: var(--blue-light-500);

        /** Field-error icon+text panel (base.components default tokenized here) **/
        --field-error-panel-bg: var(--error-100);
        --field-error-panel-color: var(--error-700);
        --field-error-panel-padding: 5px;
        --field-error-panel-radius: var(--radius-size-1);
        --field-error-gap: 0;
        --field-error-panel-font-size: var(--font-size-2);

        /** Breadcrumb (base.components defaults tokenized here) **/
        --breadcrumb-font-size: var(--font-size-2);
        --breadcrumb-color: #6b7280;
        --breadcrumb-separator-color: #9ca3af;
        --breadcrumb-link-hover-color: #003d6e;
        --breadcrumb-focus-outline-color: #0076be;
        --breadcrumb-active-color: #1a1a1a;
        --breadcrumb-active-font-weight: var(--font-weight-3);

        /** Progress nav (base.components defaults tokenized here) **/
        --progress-nav-font-weight: var(--font-weight-2);
        --progress-nav-circle-size: var(--size-4);
        --progress-nav-track-color: var(--gray-100);
        --progress-nav-track-text-color: var(--gray-600);
        --progress-nav-active-color: var(--primary-700);
        --progress-nav-active-text-color: #fff;

        /** Multiselect (base.components defaults tokenized here) **/
        --multiselect-error-border-color: var(--error-600);
        --multiselect-accent-color: var(--primary-700);
        --multiselect-options-border-color: var(--gray-400);
        --multiselect-border-color: var(--gray-300);
        --multiselect-text-color: var(--gray-900);
        --multiselect-bg: var(--white);
        --multiselect-icon-color: var(--black);
        --multiselect-item-bg: var(--blue-light-50);
        --multiselect-option-color: var(--black);
        --multiselect-option-hover-bg: var(--primary-50);
        --multiselect-option-divider-color: var(--gray-300);
        --multiselect-overlay-color: var(--black);
        --multiselect-expand-bg: var(--primary-900);
        --multiselect-expand-text-color: var(--white);
        --multiselect-caret-icon-color: var(--primarycta-800);

        /** Product table (base.components defaults tokenized here) **/
        --product-table-header-bg: #1b2b57;
        --product-table-featured-bg: #0f1c3f;
        --product-table-category-bg: #3d4f8c;
        --product-table-accent-color: #2a3d72;
        --product-table-focus-color: #2a3d72;
        --product-table-toggle-icon-color: var(--primary-900);
        --product-table-row-alt-bg: #f8f9fc;
        --product-table-cell-bg: #eef1f8;
        --product-table-cell-alt-bg: #eceff8;
        --product-table-text-color: #151b2e;
        --product-table-text-muted-color: #4a5170;
        --product-table-border-color: #dde2ef;
        --product-table-success-color: #1c8a4b;
        --product-table-danger-color: #c8372e;
        --product-table-radius: 20px;
        --product-table-shell-shadow: 0 1px 2px rgba(15, 28, 63, 0.04);
        --product-table-title-color: var(--white);
        --product-table-title-bg: var(--primary-700);

        /** Header nav (base.components defaults tokenized here) **/
        --header-nav-accent-color: var(--primary-700);
        --header-nav-accent-hover-color: var(--primary-900);
        --header-nav-link-color: var(--primary-900);
        --header-nav-dropdown-link-color: var(--gray-900);
        --header-nav-dropdown-link-hover-bg: var(--primary-25);
        --header-nav-utility-bg: var(--bluedark-900);
        --header-nav-utility-icon-color: var(--primarycta-700);
        --header-nav-mobile-link-color: var(--primary-800);
        --header-nav-mobile-chevron-color: var(--primary-800);
        --header-nav-mobile-link-hover-bg: var(--primary-25);
        --header-nav-mobile-submenu-bg: var(--white);
        --header-nav-mobile-submenu-link-color: var(--gray-900);
        --header-nav-mobile-submenu-link-hover-color: var(--primary-800);

        /** Base links, buttons, paragraphs, lists (base.reset defaults tokenized here) **/
        --link-color: var(--primary-800);
        --link-hover-color: var(--primary-900);
        --link-focus-outline-color: var(--primary-900);
        --link-focus-radius: var(--radius-size-1);
        --paragraph-spacing: var(--size-2);
        --list-bullet-color: var(--black);

        /** Generic Section BG Gradient **/
        --gradient-1: linear-gradient(180deg, #fbfbf9 32.75%, #fff);
        /** FAQ Section BG Gradient **/
        --gradient-2: linear-gradient(180deg, #fff 32.75%, #f5f5eb);
    }

    /** BASE STYLES **********************************************/
    html {
        font-size: var(--font-size-base);
        font-family: var(--font-family-1);
        color: var(--gray-700);
        line-height: 1.4;
        font-weight: var(--font-weight-2);
        letter-spacing: normal;
        height: 100%;
        /* full site height fix */
        scroll-behavior: smooth;
    }

    body {
        font-size: inherit;
        font-family: inherit;
        color: var(--gray-700);
        line-height: 1.4;
        font-weight: var(--font-weight-2);
        letter-spacing: normal;
        height: 100%;
    }

    /** **********************************************/
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--primary-900);
        font-weight: var(--font-weight-3);
        margin: 0;
        padding: 0;
        line-height: 1.3;
    }

    h1 {
        font-size: var(--font-size-8);
        line-height: 1.25;
        text-align: center;
        color: var(--bluedark-900);
    }

    h2 {
        font-size: var(--font-size-7);
        line-height: 1.25;
    }

    @media screen and (min-width: 576px) {
        h1 {
            font-size: var(--font-size-9);
        }

        h2 {
            font-size: var(--font-size-8);
        }
    }

    h3 {
        font-size: var(--font-size-7);
        line-height: 1.25;
    }

    h4 {
        font-size: var(--font-size-6);
    }

    h5 {
        font-size: var(--font-size-5);
    }

    h6 {
        font-size: var(--font-size-3);
    }

    /** **********************************************/
    sup,
    sub {
        font-size: 0.7em;
    }

    a:has(> sup) {
        text-decoration: none;
    }

    h1 sup,
    h2 sup,
    h3 sup,
    h4 sup,
    h5 sup,
    h6 sup,
    h1 sub,
    h2 sub,
    h3 sub,
    h4 sub,
    h5 sub,
    h6 sub {
        font-size: 0.55em;
    }

    h1 i,
    h2 i,
    h3 i,
    h4 i,
    h5 i,
    h6 i {
        font-family: var(--font-family-2);
        font-weight: var(--font-weight-2);
        font-size: 1.2em;
    }

    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: var(--primary-900);
        text-decoration: none;

        &:hover {
            color: color-mix(in oklch, var(--primary-900) 80%, black);
        }
    }

    /** **********************************************/

    /* Teaser component's default action link — automatic, not an author-opted button variant */
    a.cmp-teaser__action-link {
        position: relative;
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        padding-inline-end: calc(1.5rem + var(--size-1));
        color: var(--primarycta-800);
        font-weight: 700;
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        font-size: 1.25rem;
        line-height: 1.875rem;
        align-items: center;

        &:after {
            /* Out-of-flow icons do not receive the link's underline. */
            position: absolute;
            inset-inline-end: 0;
            top: 50%;
            transform: translateY(-50%);
            text-decoration: none;
            width: 1.5rem;
            line-height: 1;
            font-family: "Material Symbols Rounded";
            content: "\e941";
            font-size: 1.5rem;
            font-weight: 400;
        }

        &:hover {
            color: var(--primarycta-900);
        }
    }

    /* Base Button Styles - Inverse */

    hr {
        margin: var(--size-3) 0;
        border: 0;
        border-top: 1px solid var(--gray-50);
    }

    /** **********************************************/
    blockquote {
        font-size: 1.125rem;
        font-weight: 400;
        color: var(--gray-500);
        line-height: 1.5;
        margin: 0px 0px 1rem;
        padding: 0.5625rem 1.25rem 0px 1.1875rem;
        border-left: 1px solid rgb(202, 202, 202);
    }

    byline {
        padding: var(--size-2) 0 0 0;
        margin: 0;
        font-size: var(--font-size-2);
        font-style: normal;
        font-weight: var(--font-weight-4);
    }

    /** **********************************************/
    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button,
    .ui-widget {
        font-family: inherit;
    }

    input,
    select,
    textarea {
        padding: 12px 14px;
        margin: 0;
        font-family: inherit;
        /* fixes odd bug w being overwritten by browser agentstylesheet */
        font-size: var(--font-size-4);
        background-color: var(--white);
        border: 1px solid var(--gray-300);
        color: var(--gray-900);
        line-height: 1.5rem;
        border-radius: 12px;
        width: 100%;
        transition: border .3s ease;
    }
    .fldErr input,
    .fldErr select,
    .fldErr textarea,
    .fldErr input[type="checkbox"],
    .fldErr input[type="radio"] {
        border-color: var(--error-700, #e81944);
        background-color: var(--field-error-bg, #fbe7eb);
        color: var(--field-error-color, #e81944);
    }
    textarea {
        min-height: 200px;
    }

    select {
        appearance: none;
        background: #fff url(/content/dam/config/branding-stylesheets/master/icons/down-angle.svg) no-repeat;
        background-size: 15px;
        background-position: calc(100% - 20px) center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 37px;
        cursor: pointer;
    }

    input[type="submit"],
    input[type="reset"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="file"],
    input[type="image"] {
        width: auto;
    }

    input::placeholder,
    select::placeholder,
    textarea::placeholder,
    select:invalid {
        color: color-mix(in srgb, var(--gray-400), black 20%);
        /* 20% darker */
    }

    input:-moz-placeholder,
    input::-moz-placeholder {
        opacity: 1;
    }

    /* fix for odd FF opacity setting */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        /* hide up/down arrows in type=number inputs */
        appearance: none;
        margin: 0;
    }

    input[readonly],
    input[disabled] {
        color: var(--gray-900);
    }

    select[readonly],
    select[disabled] {
        color: var(--black);
    }

    .inputField {
        width: -webkit-fill-available;
        width: fill-available;
        position: absolute;
        border: 0;
    }

    .inputField:focus-visible {
        border: 0;
    }

    input[type="number"] {
        appearance: textfield;
    }

    /* hide up/down arrows in type=number inputs */
    select:focus-visible option {
        background: #fff;
        color: var(--gray-900);
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        border: 1px solid var(--primaryorg-800);
        background-color: var(--white);
        color: var(--gray-900);
    }
    input:hover,
    select:hover,
    textarea:hover,
    .drop:hover {
        border: 1px solid var(--primaryorg-800);
    }

    label,
    .Tokenize .cmp-tokenize-frame label {
        font-weight: 500;
        font-size: var(--font-size-4);
        line-height: 1.6;
        margin: 0;
        color: var(--gray-700);
        display: inline-block;
        cursor: pointer;
        margin-bottom: 5px;
    }

    label p,
    legend p {
        padding-bottom: 0;
    }

    legend {
        width: 100%;
    }

    /*fix for display:block not default, float:right of content inside can't go far right otherwise */

    /** TOKENIZE COMPONENT  *****/
    /** **********************************************/
    /* customize tokenization component and base.less on per-brand basis */
    .Tokenize .fldErr .iframe-element {
        outline: 1px solid var(--error-600);
        outline-offset: -1px;
        max-height: 51px;
        background-color: var(--pink-50);
    }

    .Tokenize .iframe-element,
    .Tokenize .fldErr .iframe-element {
        /* customize iframe height of tokenization component on per-brand basis */
        max-height: 48px;
        border-radius: var(--radius-size-1);
    }

    .Tokenize .iframe-element iframe {
        /* customize iframe height of tokenization component on per-brand basis */
        max-height: 51px;
    }

    /** ****************************/
    input[type="checkbox"] {
        margin: 0 10px 0 0;
        appearance: none;
        background-color: var(--white);
        border: 1px solid var(--gray-700);
        padding: 9px;
        border-radius: var(--radius-size-1);
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type="checkbox"]:checked {
        background-color: var(--primary-700);
        border: 1px solid var(--primary-700);
        color: var(--white);
    }

    input[type="checkbox"]:checked:after {
        content: "\2714\fe0e";
        /* iOS does color properly '\2714' */
        font-size: 14px;
        position: absolute;
        top: -2px;
        left: 3px;
        color: var(--white);
    }

    input[type="checkbox"]:focus-visible {
        outline: 1px solid var(--primary-700);
        outline-offset: 2px;
    }

    .inputIsDisabled input[type="checkbox"]:checked {
        background: var(--gray-700);
        border-color: var(--gray-700);
    }

    .inputIsDisabled input[type="checkbox"]:checked:after {
        color: var(--white);
    }

    /** ****************************/
    input[type="radio"] {
        margin: 0 10px 0 0;
        appearance: none;
        background-color: var(--white);
        border: 1px solid var(--gray-700);
        padding: 9px;
        border-radius: 10px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type="radio"]:checked {
        background-color: var(--primary-700);
        border: 1px solid var(--primary-700);
        color: var(--white);
    }

    input[type="radio"]:checked:after {
        content: " ";
        font-size: 14px;
        position: absolute;
        top: 0;
        left: 0;
        border: 2px solid #fff;
        border-radius: 10px;
        height: 100%;
        width: 100%;
    }

    input[type="radio"]:focus-visible {
        outline: 1px solid var(--primary-700);
        outline-offset: 2px;
    }

    .inputIsDisabled input[type="radio"]:checked {
        background: var(--gray-700);
        border-color: var(--gray-700);
    }

    .inputIsDisabled input[type="radio"]:checked:after {
        color: var(--white);
    }

    /** ****************************/
    .inputIsDisabled label {
        cursor: not-allowed;
    }

    input[readonly],
    input[disabled],
    select[readonly],
    select[disabled],
    input[readonly]:focus-visible,
    input[disabled]:focus-visible,
    select[readonly]:focus-visible,
    select[disabled]:focus-visible,
    input[readonly].datePickerIcon,
    input[disabled].datePickerIcon {
        background-color: var(--gray-50);
        border-color: var(--gray-700);
        color: var(--gray-700);
        cursor: not-allowed !important;
    }

    /** ****************************/
    .cmp-form-options.cmp-form-options--checkbox>legend,
    .cmp-form-options.cmp-form-options--radio>legend {
        font-weight: var(--font-weight-4);
        font-size: var(--font-size-4);
        line-height: 1.6;
        margin: 0;
        padding: 0 0 calc(var(--size-1) - 6px) 0;
        color: var(--gray-900);
    }

    .cmp-form-options.cmp-form-options--checkbox>label,
    .cmp-form-options.cmp-form-options--radio>label {
        padding-left: 36px;
        /* left alignment offset*/
        font-weight: var(--font-weight-2);
        line-height: 1;
        margin: 0 var(--size-6) 0 0;
    }

    .cmp-form-options.cmp-form-options--checkbox>label>input,
    .cmp-form-options.cmp-form-options--radio>label>input {
        margin-left: -36px;
        /* left alignment offset correction */
        float: left;
        /* fix for random <p> in RTE of radio/checkboxes */
    }

    /** **********************************************/
    .text .cmp-form-text .rte-wrap {
        display: inline-block;
    }

    /** **********************************************/
    img {
        max-width: 100%;
        margin-bottom: -4px;
    }

    svg {
        max-width: 100%;
    }

    /** *PURCHASE PATH STYLES *********************************************/
    .fldErr input,
    .fldErr select,
    .fldErr textarea,
    .fldErr input[type="checkbox"],
    .fldErr input[type="radio"] {
        background-color: white !important;
    }

    .cmp-repeatable-container-buttons {
        margin: var(--size-1) 0;
    }

    /* Repeatable Add/Remove Buttons */
    .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--removeButton:before {
        border-radius: 20px;
        content: "\EA45";
        font-family: "Hinge Icons";
        font-size: 1rem;
        background: var(--bluedark-900);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }

    .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--addButton:before {
        border-radius: 20px;
        content: "\EA24";
        font-family: "Hinge Icons";
        font-size: 1rem;
        background: var(--bluedark-900);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }

    .container .cmp-container .cmp-repeatable-container-buttons button {
        align-items: center;
    }

    #faqs {
        background: linear-gradient(180deg, #fff 32.75%, #f5f5eb);
    }

    #faq-accordion.cmp-accordion .cmp-accordion__item {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        padding: 16px;
        margin-top: var(--size-2);

        &:hover {
            box-shadow:
                0 12px 16px -4px rgba(16, 24, 40, 0.1),
                0 4px 6px -2px rgba(16, 24, 40, 0.05);
        }
    }

    #faq-accordion.cmp-accordion .cmp-accordion__button {
        color: black;
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.75rem;
        display: flex !important;
        /* overrides the default display: block from clientlib */
        padding: 0;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        align-items: center;
    }

    #faq-accordion.cmp-accordion .cmp-accordion__title {
        flex: 1;
    }

    #faq-accordion.cmp-accordion .cmp-accordion__button::before {
        position: initial;
        content: "\e147";
        font-family: "Material Symbols Rounded";
        color: var(--primary-800);
        font-size: 1.5rem;
        transition: transform 0.2s ease;
    }

    #faq-accordion.cmp-accordion .cmp-accordion__button.cmp-accordion__button--expanded::before {
        position: initial;
        content: "\e644";
        font-family: "Material Symbols Rounded";
        color: var(--primary-800);
        font-size: 1.5rem;
        transform: rotate(180deg);
    }

    #faq-accordion.cmp-accordion .cmp-accordion__panel {
        display: grid !important;
        grid-template-rows: 0fr;
        padding-top: 0px;
        transition: all 0.35s ease;
    }

    #faq-accordion.cmp-accordion .cmp-accordion__panel--expanded {
        grid-template-rows: 1fr;
        padding-top: 1rem;
    }

    #faq-accordion.cmp-accordion .cmp-accordion__panel>* {
        overflow: hidden;
    }

    #faq-accordion h4 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 1rem;
    }

    .coverage-section-tabs .cmp-tabs__tablist {
        justify-content: safe center;
        position: sticky;
        top: 60px;
        z-index: 10;
        background: #fff;
        padding-top: 15px !important;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .coverage-section-tabs.no-sticky-tabs .cmp-tabs__tablist {
        position: relative;
        top: 0;
    }

    .coverage-section-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
        background-color: #3b5cad;
        border-color: #3b5cad;
        border-style: solid;
        border-width: 1px;
        color: #fff;
        padding: 15px 25px;
        border-radius: 10px 10px 0 0;
    }

    .coverage-section-tabs .cmp-tabs__tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 30px;
        margin-bottom: 0;
        padding: 15px 25px !important;
        background-color: var(--primary-50);
        border: 1px solid var(--primary-50);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        color: var(--primary-900);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
    }

    .coverage-section-tabs .cmp-tabs__tabpanel {
        padding: 0 !important;
        border: none !important;
    }

    @media (max-width: 767px) {
        .coverage-section-tabs .cmp-tabs__tablist {
            flex-wrap: nowrap;
            justify-content: safe start;
            gap: .5rem;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .coverage-section-tabs .cmp-tabs__tab {
            margin: 0;
            padding: .6rem !important;
        }
    }

    #benefits-page-productTable-wrapper {
        margin-top: -150px;
        position: relative;
    }

    #what-you-get .grid {
        margin-top: -100px;
    }

    #benefits-page-table-img img {
        height: 400px !important;
        object-fit: cover;
    }

    #footer-xf-wrapper {
        content-visibility: auto;
        contain-intrinsic-size: auto 690px;
    }

    #footer-contact-box {
        border: 1px solid var(--blue-light-200);
        border-radius: 8px;
        font-family: Inter, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 8px 14px;

        #footer-phone a {
            color: var(--primarycta-800);
            font-size: 19px;
            font-style: normal;
            font-weight: 700;
            letter-spacing: -.57px;
            line-height: 30px;
            margin-bottom: 8px;
            margin-top: 12px;
            text-decoration: none;
        }
    }

}

/* end @layer brand */

@layer utility.brand {

    .coverage-section-tabs .image img {
        height: 400px;
        object-fit: cover;
    }

    #unpack-our-coverage {
        --grid-gap-row: 120px;
    }

    /* Base Button Styles - Normal */
    .btn-primary button,
    .btn-primary>a {
        border-color: var(--primarycta-800);
        border-style: solid;
        border-width: 1px;
        cursor: pointer;
        background-color: var(--primarycta-800);
        color: #fff;
        font-weight: 700;
        vertical-align: middle;
        padding: var(--button-size-padding, 12px 20px);
        border-radius: .75rem;
        font-size: var(--button-size-font, 1.25rem);
        text-decoration: none;

        &:hover {
            background-color: var(--primarycta-900);
            border-color: var(--primarycta-900);
        }

        &:focus-visible {
            box-shadow:
                hsla(0, 0%, 100%, 0.15) 0px 1px 0px 0px inset,
                0 0 0 4px rgba(255, 139, 81, 0.5);
            outline: none;
        }
    }

    /* Outline secondary and danger variants; inverse danger is filled. */
    .btn-secondary {
        --variant-color: var(--primary-900);
        --variant-background: var(--white);
        --variant-border: var(--primary-900);
        --variant-hover-color: var(--primary-900);
        --variant-hover-background: var(--primary-50);
        --variant-hover-border: var(--primary-900);
        --variant-focus: var(--primary-900);
    }

    .btn-danger {
        --variant-color: var(--error-600);
        --variant-background: var(--white);
        --variant-border: var(--error-600);
        --variant-hover-color: var(--error-700);
        --variant-hover-background: var(--error-50);
        --variant-hover-border: var(--error-700);
        --variant-focus: var(--error-600);
    }

    .btn-danger-inverse {
        --variant-color: var(--white);
        --variant-background: var(--error-600);
        --variant-border: var(--error-600);
        --variant-hover-color: var(--white);
        --variant-hover-background: var(--error-700);
        --variant-hover-border: var(--error-700);
        --variant-focus: var(--error-600);
    }

    .btn-danger-disabled {
        --variant-color: var(--white);
        --variant-background: var(--error-200);
        --variant-border: var(--error-200);
        --variant-hover-color: var(--white);
        --variant-hover-background: var(--error-200);
        --variant-hover-border: var(--error-200);
        --variant-focus: var(--error-300);
    }

    /* Both AEM regular and form buttons, plus regular link buttons. */
    :is(.btn-secondary, .btn-danger, .btn-danger-inverse, .btn-danger-disabled) button,
    :is(.btn-secondary, .btn-danger, .btn-danger-inverse, .btn-danger-disabled) > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--button-size-gap, 8px);
        box-sizing: border-box;
        min-height: 44px;
        padding: var(--button-size-padding, 12px 20px);
        border: 1px solid var(--variant-border);
        border-radius: 0.75rem;
        background: var(--variant-background);
        color: var(--variant-color);
        font-family: inherit;
        font-size: var(--button-size-font, 1.25rem);
        font-weight: 700;
        line-height: var(--button-size-line-height, 1.25);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;

        &:hover:not(:disabled, [aria-disabled="true"]) {
            border-color: var(--variant-hover-border);
            background: var(--variant-hover-background);
            color: var(--variant-hover-color);
        }

        &:focus-visible {
            outline: 2px solid var(--variant-focus);
            outline-offset: 3px;
            box-shadow: none;
        }

        &:is(:disabled, [aria-disabled="true"]) {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none;
        }

        :is(.cmp-button__icon, .cmp-form-button__icon) {
            color: inherit;
        }
    }

    .btn-danger-disabled button,
    .btn-danger-disabled > a,
    .btn-danger-disabled button:is(:disabled, [aria-disabled="true"]),
    .btn-danger-disabled > a[aria-disabled="true"] {
        opacity: 1;
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-tertiary button,
    .btn-tertiary>a {
        color: var(--primarycta-800);
        font-weight: 700;
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        font-size: var(--button-size-font, 1.25rem);
        line-height: var(--button-size-line-height, 1.875rem);
        align-items: center;

        &:after {
            float: right;
            height: 100%;
            padding-left: var(--size-1);
            font-family: "Material Symbols Rounded";
            content: "\e941";
            font-size: 1.5rem;
        }

        &:hover {
            color: var(--primarycta-900);
        }
    }

    .btn-primary-inverse button,
    .btn-primary-inverse>a,
    .checkbox-primary-inverse .cmp-form-options--checkbox .cmp-form-options__field-description {
        border-color: var(--primarycta-800);
        border-style: solid;
        border-width: 1px;
        cursor: pointer;
        background-color: #fff;
        color: var(--primarycta-800);
        font-weight: 700;
        vertical-align: middle;
        padding: var(--button-size-padding, 12px 20px);
        border-radius: .75rem;
        font-size: var(--button-size-font, 1.25rem);
        text-decoration: none;

        &:hover {
            color: var(--primarycta-900);
            border-color: var(--primarycta-900);
        }

        &:focus-visible {
            box-shadow:
                hsla(0, 0%, 100%, 0.15) 0px 1px 0px 0px inset,
                0 0 0 4px rgba(255, 139, 81, 0.5);
            outline: none;
        }
    }

    /* Button-style checkbox; apply the modifier to the options wrapper. */
    .checkbox-primary-inverse .cmp-form-options--checkbox > .cmp-form-options__field-label {
        position: relative;
        display: inline-block;
        padding-left: 0;
        margin: 0;
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox > .cmp-form-options__field-label > input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox .cmp-form-options__field-description {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        line-height: 1.5;
        text-align: center;
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox .cmp-form-options__field-description p {
        margin: 0;
        color: inherit;
        font: inherit;
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox input:checked + .cmp-form-options__field-description::before {
        content: "\2714\fe0e";
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox input:focus-visible + .cmp-form-options__field-description {
        box-shadow:
            hsl(0deg 0% 100% / 15%) 0 1px 0 0 inset,
            0 0 0 4px rgb(255 139 81 / 50%);
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .checkbox-primary-inverse .cmp-form-options--checkbox input:disabled + .cmp-form-options__field-description {
        color: var(--gray-700);
        border-color: var(--gray-700);
        cursor: not-allowed;
        opacity: 0.6;
    }

    .btn-secondary-inverse button,
    .btn-secondary-inverse>a {
        background-color: var(--blue-light-100);
        display: inline-block;
        text-decoration: none;
        font-weight: var(--font-weight-3);
        color: var(--primary-900);
        font-size: var(--font-size-3);
        padding: var(--button-padding);
        border-radius: var(--radius-size-3);
        border: none;
        cursor: pointer;

        &:hover {
            background-color: var(--blue-light-200);
        }
    }

    .btn-tertiary-inverse button,
    .btn-tertiary-inverse>a {
        background-color: var(--transparent);
        display: inline-block;
        color: var(--white);
        font-size: var(--font-size-3);
        text-decoration: none;
        font-weight: var(--font-weight-3);
        padding: var(--button-padding);
        border: 1px solid var(--white);
        border-radius: var(--radius-size-3);
        cursor: pointer;

        &:hover {
            color: var(--blue-light-500);
            border-color: var(--blue-light-500);
        }
    }

    .btn-disabled button,
    .btn-disabled>a {
        background-color: var(--gray-50);
        display: inline-block;
        text-decoration: none;
        color: var(--gray-400);
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-3);
        padding: var(--button-padding);
        border-radius: var(--radius-size-3);
        border: none;
        cursor: pointer;

        &:hover {
            cursor: not-allowed;
        }
    }

    /* Primary disabled variant: pair with native disabled for button behavior. */
    .btn-primary-disabled button,
    .btn-primary-disabled > a {
        background-color: var(--primarycta-200);
        border: 1px solid var(--primarycta-200);
        border-radius: 0.75rem;
        color: #fff;
        cursor: not-allowed;
        font-size: 1.25rem;
        font-weight: 700;
        opacity: 1;
        padding: 12px 20px;
        text-decoration: none;
        vertical-align: middle;

        &:hover,
        &:active {
            background-color: var(--primarycta-200);
            border-color: var(--primarycta-200);
            color: #fff;
        }
    }

    /** TEXT COMPONENT > RTE **********************************************/
    .font-orange,
    .font-orange a {
        color: var(--primaryorg-800);
    }

    .font-purple,
    .font-purple a {
        color: #904fd8;
    }

    .font-red,
    .font-red a {
        color: var(--error-700);
    }

    .font-green,
    .font-green a {
        color: var(--green-900);
    }

    .font-blue-medium,
    .font-blue-medium a {
        color: var(--primary-600);
    }

    .font-blue-dark,
    .font-blue-dark a {
        color: var(--primary-900);
    }

    .font-blue-darker,
    .font-blue-darker a {
        color: var(--bluedark-900);
    }

    .font-white,
    .font-white a {
        color: var(--white);
    }

    .font-white a:focus-visible {
        outline-color: var(--white);
    }

    .font-gray-light,
    .font-gray-light a {
        color: var(--gray-400);
    }

    .font-gray-medium,
    .font-gray-medium a {
        color: var(--gray-600);
    }

    .font-gray-dark {
        color: var(--gray-900);
    }

    .font-size-x-small,
    .font-size-x-small a {
        font-size: var(--font-size-2);
    }

    .font-size-small,
    .font-size-small a {
        font-size: var(--font-size-3);
    }

    .font-size-normal,
    .font-size-normal a {
        font-size: var(--font-size-4);
    }

    .font-size-large,
    .font-size-large a {
        font-size: var(--font-size-6);
    }

    .font-size-x-large,
    .font-size-x-large a {
        font-size: var(--font-size-7);
    }

    .font-size-xx-large,
    .font-size-xx-large a {
        font-size: var(--font-size-8);
    }

    .font-size-xxx-large,
    .font-size-xxx-large a {
        font-size: var(--font-size-9);
    }

    .font-weight-narrow {
        font-weight: var(--font-weight-1);
    }

    .font-weight-regular {
        font-weight: 400;
    }

    .font-weight-semi-bold {
        font-weight: 500;
    }

    .font-weight-bold {
        font-weight: 600;
    }

    .font-float-right {
        float: right;
    }

    .font-float-left {
        float: left;
    }

    /* .doc_pdf {
}
.doc_excel {
}
.printer {
}
.envelope {
}
.link {
}
.word_doc {
}
.x-small {
}
.small {
}
.large {
}
.x-large {
}
.xx-large {
}
.xxx-large {
}
.xxxx-large {
}
.icon-dismiss {
} */

    .icon-dismiss:before {
        border: 1px solid var(--error-600);
        color: var(--error-600);
        font-weight: var(--font-weight-3);
        font-size: var(--font-size-2);
    }

    .icon-dismiss:hover:before {
        background: var(--error-600);
        border-color: var(--error-600);
    }

    ul.checklist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ul.checklist>li {
        --checklist-line-height: 1.5rem;

        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        line-height: var(--checklist-line-height);
    }

    ul.checklist>li.check::before,
    ul.checklist>li.x::before {
        display: grid;
        place-items: center;
        align-self: start;
        font-family: "Material Symbols Rounded";
        font-size: var(--font-size-7);
        width: 1.5rem;
        height: var(--checklist-line-height);
        line-height: 1;
        margin: 0;
    }

    ul.checklist>li.check::before {
        color: var(--success-600);
        content: "\e86c";
    }

    ul.checklist>li.x::before {
        color: var(--error-600);
        content: "\e349";
    }

    /* -------------------------------------------------------------
   50 / 50 SECTION IMAGE MASK & GRADIENT EDGES
   ------------------------------------------------------------- */
    .image-skew-2,
    .card--article .cmp-teaser__image,
    .card--plan--with-image .cmp-teaser__image {
        --skew: 80px;
        --line-width: 12px;
        position: relative;
        overflow: hidden;
    }

    @media (max-width: 767px) {

        .image-skew-2,
        .card--article .cmp-teaser__image,
        .card--plan--with-image .cmp-teaser__image {
            --skew: 40px;
            --line-width: 9px;
        }
    }

    .image-skew-2,
    .image-skew-2:after,
    .image-skew-2:before,
    .card--article .cmp-teaser__image,
    .card--article .cmp-teaser__image:after,
    .card--article .cmp-teaser__image:before,
    .card--plan--with-image .cmp-teaser__image,
    .card--plan--with-image .cmp-teaser__image:after,
    .card--plan--with-image .cmp-teaser__image:before {
        clip-path: polygon(var(--skew) 0,
                100% 0,
                calc(100% - var(--skew)) 100%,
                0 100%);
    }

    .image-skew-2:before,
    .card--article .cmp-teaser__image:before,
    .card--plan--with-image .cmp-teaser__image:before {
        background: linear-gradient(-192deg, #ff671b -1.45%, #fff 83.92%);
        left: calc(100% - var(--line-width) - var(--skew));
    }

    .image-skew-2:after,
    .card--article .cmp-teaser__image:after,
    .card--plan--with-image .cmp-teaser__image:after {
        background: linear-gradient(-12deg, #3b5cad 1.4%, #fff 83.11%);
        right: calc(100% - var(--line-width) - var(--skew));
    }

    .image-skew-2:after,
    .image-skew-2:before,
    .card--article .cmp-teaser__image:after,
    .card--article .cmp-teaser__image:before,
    .card--plan--with-image .cmp-teaser__image:after,
    .card--plan--with-image .cmp-teaser__image:before {
        bottom: 0;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .card--article .cmp-teaser__image,
    .card--plan--with-image .cmp-teaser__image {
        --line-width: 9px;
        --skew: 30px;
    }

    .card--article .cmp-teaser__image .cmp-image__image,
    .card--plan--with-image .cmp-teaser__image .cmp-image__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card.card--article {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .bleed-image--50-50-section {
        margin: -25px 0;
    }

    @media (min-width: 768px) {
        .bleed-image--app-section img {
            transform: scale(1.15);
            margin-top: -50px;
            margin-bottom: -100px;
        }
    }

    @media (max-width: 767px) {
        .bleed-image--app-section img {
            margin-top: -100px;
            margin-bottom: -100px;
        }

        .bleed-image--app-section .cmp-image {
            display: flex;
            justify-content: center;
        }
    }

    .card--plan-basic {
        background: var(--white);
        box-shadow: none;
    }

    .card.card--plan-basic .cmp-teaser__title {
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        margin-bottom: .25rem;
    }

    .card .cmp-teaser__title {
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 500;
    }

    .card:not(.card--article) {
        display: flex;
        /* card is flex only when it is NOT an article */
    }

    .card:not(.card--article) img {
        width: 48px;
        height: 48px;
    }

    .card:not(.card--article)>.cmp-teaser .cmp-teaser__content {
        flex: 1;
        /* stretch content vertically only on non-article cards */
    }

    .card:not(.card--article)>.cmp-teaser .cmp-teaser__action-container {
        margin-top: auto;
        /* push CTA to bottom only on non-article cards */
    }

    .overview-intro-wrapper {
        max-width: 770px;
    }

    #block-travelex-redesign-quotebanner-hub {
        background-position: center;
    }

    @media (min-width: 990px) {

        #block-travelex-redesign-quotebanner-hub h1,
        #block-travelex-redesign-quotebanner-hub #hero-quote-btn {
            margin-left: 85px;
        }
    }

    #block-travelex-redesign-quotebanner-hub h1 {
        font-size: 40px;
        letter-spacing: -.8px;
        line-height: 50px;
    }

    #block-travelex-redesign-quotebanner-hub h1 i {
        font-size: 52px;
        letter-spacing: -.52px;
        line-height: 56px;
        font-weight: 500;
    }

    @media (max-width: 767px) {
        #block-travelex-redesign-quotebanner-hub {
            background-position: center;
            height: 400px;
            padding: 1rem 1rem 0 1rem;
        }

        #block-travelex-redesign-quotebanner-hub .container,
        #block-travelex-redesign-quotebanner-hub .cmp-container {
            padding: 0;
        }

        #block-travelex-redesign-quotebanner-hub h1 {
            font-size: 36px;
            letter-spacing: -.72px;
            line-height: 44px;
        }

        #block-travelex-redesign-quotebanner-hub h1 i {
            font-size: 44px;
            line-height: 40px;
            font-weight: 500;
        }
    }

    .anchor-dynamic-wrapper.is-fixed {
        padding: 7px !important;
    }

    .anchor-link-item {
        font-weight: 500 !important;
        font-size: 16px !important;
        padding: 10px 16px !important;
        border-bottom: 2px solid transparent !important;
    }

    .anchor-link-item.active {
        border-bottom-color: var(--primary-900) !important;
        color: var(--primary-900) !important;
    }

    .primaryctabtn {
        border-color: var(--primarycta-800) !important;
        border-style: solid !important;
        border-width: 1px !important;
        cursor: pointer !important;
        background-color: var(--primarycta-800) !important;
        color: #fff !important;
        font-weight: 700 !important;
        vertical-align: middle !important;
        padding: 12px 20px !important;
        border-radius: .75rem !important;
        font-size: 1.15rem !important;
        text-decoration: none !important;

        &:hover {
            background-color: var(--primarycta-900) !important;
            border-color: var(--primarycta-900) !important;
        }

        &:focus-visible {
            box-shadow:
                hsla(0, 0%, 100%, 0.15) 0px 1px 0px 0px inset,
                0 0 0 4px rgba(255, 139, 81, 0.5) !important;
            outline: none !important;
        }
    }

    @media (max-width: 991px) {
        .primaryctabtn {
            display: none !important;
        }
    }

    /* Travelex Specific Font Scale Utilities */
    .text-xs :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .text-sm :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .text-base :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .text-lg :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .text-xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 1.25rem;
        line-height: 1.875rem;
    }

    .text-2xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .text-3xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .text-4xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .text-5xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 3rem;
        line-height: 1;
    }

    .text-6xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 3.75rem;
        line-height: 1;
    }

    .text-7xl :is(.cmp-text, .cmp-title .cmp-title__text) {
        font-size: 4.5rem;
        line-height: 1;
    }

    .drop {
        border-radius: 12px;
        transition: border .3s ease;
    }
    
    .drop-options {
        border: none;
        box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .1), 0 -10px 8px -2px rgba(16, 24, 40, .05);
    }

    .drop-options [data-selected="false"]::before {
        content: 'check';
        font-family: 'Material Symbols Rounded';
        margin-right: 10px;
        color: var(--gray-100);
        font-size: 1rem;
        font-weight: 700;
        background: var(--gray-25);
        border: 1.5px solid var(--gray-100);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
        line-height: 1;
        flex-shrink: 0;
    }

    .drop-options a[data-selected="true"] {
        background: var(--primary-50);
    }

    .drop-options [data-selected="true"]::before {
        content: 'check';
        font-family: 'Material Symbols Rounded';
        margin-right: 10px;
        color: var(--primary-800);
        font-size: 1rem;
        font-weight: 700;
        background: var(--primary-200);
        border: 1.5px solid var(--primary-800);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
        line-height: 1;
        flex-shrink: 0;
    }

    .drop .drop-options a:hover {
        color: var(--primary-800);
    }

    .drop.open {
        border: 1px solid var(--primaryorg-800);
    }

    .drop .drop-display {
        min-height: 48px;
        border-radius: 12px;
    }
    .drop .drop-display input#cmp-Input {
        border: none !important;
        text-overflow: ellipsis;
        padding-right: 25px;
    }

    #custom-help-message-tooltip-modal .tooltip-header {
        padding-bottom: var(--size-1);
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: var(--size-2);
    }

    #custom-help-message-tooltip-modal .tooltip-header p {
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-3);
        color: var(--black);
    }

    .trustpilot-card svg {
        max-width: 120px;
    }

    .trustpilot-card div.container.responsivegrid.flex-row.justify-between.align-items-center {
        margin-top: auto;
    }

    .trustpilot-card b {
        background: #c8e6c9;
        padding: 1.3rem;
        border-radius: 9999px;
        color: var(--black);
    }

    .trustpilot-card:first-child b {
        background: #f0f4c3;
    }

    .trustpilot-card:last-child b {
        background: #fbe9e7;
    }

    .card--plan--with-image {
        background-color: var(--white);
        box-shadow: none;
        padding: 0;
        border-radius: 0 0 16.7px 16.7px;
    }

    .card--plan--with-image .cmp-teaser__content {
        padding: 1rem 2rem 2rem 2rem;
        background-image: linear-gradient(#fff, #fff), linear-gradient(transparent 10%, #d6d6d6) !important;
        background: transparent;
        background-clip: padding-box, border-box;
        background-origin: border-box;
        border: 2px solid transparent;
        border-radius: 0 0 16.7px 16.7px;
        position: relative;
        gap: .8rem;
    }

    @media (width < 990px) {
        .card--plan--with-image .cmp-teaser__content {
            padding: 1rem;
        }
    }

    .card--plan--with-image .cmp-teaser__content:has(> .cmp-teaser__pretitle) {
        background-image: linear-gradient(#fff, #fff), linear-gradient(transparent 10%, #c39) !important;
    }

    .card--plan--with-image .cmp-teaser__title {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 600;
    }

    .card--plan--with-image .cmp-teaser__pretitle {
        background: var(--pink-900);
        color: white;
        padding: .5rem 1rem;
        border-radius: 9999px;
        position: absolute;
        top: -45px;
        z-index: 999;
    }

    .card--plan--with-image ul.checklist {
        padding-top: 1rem;
    }

    ul.upgrades-card-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    ul.upgrades-card-list a {
        text-decoration: none;
    }

    ul.upgrades-card-list>li {
        list-style: none;
        color: var(--primary-900);
        padding: .75rem 14px;
        border: 1px solid var(--primary-900);
        border-radius: 9999px;
        font-size: var(--font-size-2);
        font-weight: 600;
    }

    ul.upgrades-card-list>li:hover {
        background-color: var(--primary-100);
        cursor: pointer;
    }

    #blog-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        height: max-content;
    }

    /* Travel alerts: event details and foreseeable date. */
    .travel-alert-table {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--gray-300);
        border-radius: 10px;
        box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
    }

    .travel-alert-table table {
        width: 100%;
        margin: 0;
        border: 0;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
        font-family: var(--font-family-1);
        font-size: var(--font-size-4);
        line-height: 1.5;
        color: var(--gray-700);
    }

    .travel-alert-table th,
    .travel-alert-table td {
        padding: 22px 30px;
        border: 0;
        text-align: left;
        vertical-align: top;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .travel-alert-table th+th,
    .travel-alert-table td+td {
        border-left: 1px solid var(--gray-300);
    }

    .travel-alert-table th {
        padding: 20px 30px;
        overflow-wrap: normal;
        word-break: normal;
        background-color: var(--primary-800);
        color: var(--white);
        font-size: var(--font-size-4);
        font-weight: 600;
    }

    .travel-alert-table th:first-child {
        width: 76%;
    }

    .travel-alert-table td {
        border-top: 1px solid var(--gray-300);
        background-color: var(--white);
    }

    .travel-alert-table tbody tr:nth-child(odd) td:first-child,
    .travel-alert-table tbody tr:nth-child(even) td {
        background-color: var(--primary-25);
    }

    .travel-alert-table tbody tr:nth-child(even) td:first-child {
        background-color: var(--primary-50);
    }

    .travel-alert-table td p {
        margin: 0;
    }

    .travel-alert-table a {
        color: var(--primary-800);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .travel-alert-table a:hover {
        color: var(--primary-900);
    }

    @media (width <=990px) {
        .travel-alert-table th:first-child {
            width: 50%;
        }
    }

    @media (width <=767px) {
        .travel-alert-table th,
        .travel-alert-table td {
            padding: 8px;
            font-size: 0.9rem;
        }
    }

    .travel-alerts-list .cmp-list {
        padding-left: 0;
    }

    .travel-alerts-list .cmp-list .cmp-list__item {
        list-style: none;
        background-color: #f2f6fc;
        padding: var(--size-2);
        border-radius: var(--size-3);
        margin-bottom: var(--size-2);
    }

    .travel-alerts-list ul li .cmp-list__item-link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
    }

    .travel-alerts-list ul li .cmp-list__item-title::after {
        content: '\e941';
        font-family: 'Material Symbols Rounded';
        color: var(--primarycta-800);
        font-size: var(--font-size-8);
    }

    .travel-alerts-list .cmp-list__item-title {
        color: var(--black);
        font-weight: 500;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .travel-alerts-list .cmp-list__item-date {
        color: var(--gray-500);
        font-size: var(--font-size-3);
    }

    .plan-page-table {
        margin-top: -130px;
        position: relative;
    }

    .plan-page-table table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        background: var(--white);
        border-radius: 18px;
        overflow: hidden;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* Header row: different colors per column */
    .plan-page-table thead th {
        padding: 24px 32px;
        text-align: left;
        font-size: 22px;
        font-weight: 600;
        color: var(--primary-900);
        /* header text blue */
        border-bottom: 1px solid #e2e6f0;
    }

    /* left header: white */
    .plan-page-table thead th:first-child {
        background-color: var(--white);
        /* white bg on left header */
    }

    /* right header: light blue */
    .plan-page-table thead th:last-child {
        background-color: var(--primary-50);
        /* light blue bg on right header */
    }

    /* Body row base styles */
    .plan-page-table tbody td {
        padding: 22px 32px;
        font-size: var(--font-size-4);
        border-bottom: 1px solid #e2e6f0;
        color: #222;
    }

    /* Remove border on last row */
    .plan-page-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Column backgrounds:
    - left = light grey
    - right = white (like design) */
    .plan-page-table tbody td:first-child {
        background-color: #f5f5f5;
        /* grey-ish left column cells */
        font-weight: 600;
        /* bold benefit names */
    }

    .plan-page-table tbody td:last-child {
        background-color: var(--white);
    }

    #article-hero img {
        width: 100%;
    }

    #article-body-container h2 {
        margin: 2rem 0 1rem;
    }

    #article-body-container h3 {
        margin: 1.5rem 0 1rem;
        font-size: 1.3rem;
        color: var(--black);
    }

    #article-body-container h3 i {
        font-family: "Inter";
        font-size: inherit;
        font-weight: inherit;
    }
    
    #article-quote-cta {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    @media screen and (min-width: 576px) {
        #article-quote-cta h2 {
            font-size: var(--font-size-7);
        }
    }

    /* Base table reset */
    #article-body-container table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        font-size: 14px;
        line-height: 1.4;
        color: #111827;
        /* dark text */
        background-color: #ffffff;
    }

    /* Outer border + subtle radius */
    #article-body-container table {
        border: 1px solid #e5e7eb;
        /* light gray border */
        border-radius: 4px;
        overflow: hidden;
        margin: 1.5rem 0;
    }

    /* Cells */
    #article-body-container th,
    #article-body-container td {
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: top;
    }

    /* Header row */
    #article-body-container thead th {
        background-color: #f9fafb;
        /* very light gray */
        font-weight: 600;
        text-align: left;
    }

    /* First column: "Benefit" */
    #article-body-container tbody td:first-child,
    #article-body-container thead th:first-child {
        width: 30%;
        font-weight: 500;
    }

    /* Zebra striping on body rows */
    #article-body-container tbody tr:nth-child(odd) {
        background-color: #f3f4f6;
        /* light gray row */
    }

    #article-body-container tbody tr:nth-child(even) {
        background-color: #ffffff;
    }

    /* Remove bottom border on last row */
    #article-body-container tbody tr:last-child td {
        border-bottom: none;
    }

    /* Responsive: stack on small screens */
    @media (max-width: 640px) {

        #article-body-container table,
        #article-body-container thead,
        #article-body-container tbody,
        #article-body-container th,
        #article-body-container td,
        #article-body-container tr {
            display: block;
        }

        #article-body-container thead {
            display: none;
            /* hide header, we’ll show columns as labels if needed */
        }

        #article-body-container tbody tr {
            margin-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        #article-body-container tbody td {
            border-bottom: none;
            padding: 8px 12px;
        }
    }
    #legal-page-text-wrapper ul li {
        padding-bottom: 0;
    }
    #legal-page-text-wrapper h2, #legal-page-text-wrapper h3, #legal-page-text-wrapper h4 {
        padding: 1rem 0;
    }
    @media (max-width: 767px) {
        .plan-page-table tbody td {
            padding: .8rem;
        }
    }
    @media (min-width: 990px) {
        #homepage-hero-trustpilot-wrap {
            margin-left: 85px;
        }
    }
    #homepage-hero-trustpilot-wrap svg {
        height: 25px;
        width: 120px;
    }
}

/* end @layer utility.brand */

@layer brand {
    .plan-tabs-dropdown__trigger {
        border: 1px solid var(--gray-400, #aaa);
        border-radius: 12px;
        background: var(--white, #fff);
        color: var(--gray-900, #333);
    }

    .plan-tabs-dropdown__trigger::before,
    .plan-tabs-dropdown__option::before {
        content: "check" / "";
        box-sizing: border-box;
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        padding: 0;
        border: 1.5px solid var(--gray-100);
        border-radius: 50%;
        background: var(--gray-25);
        color: var(--gray-100);
        font-family: "Material Symbols Rounded";
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        font-feature-settings: "liga";
    }

    .plan-tabs-dropdown__trigger::before,
    .plan-tabs-dropdown__option[aria-selected="true"]::before {
        border-color: var(--primary-800);
        background: var(--primary-200);
        color: var(--primary-800);
    }

    .plan-tabs-dropdown__trigger::after {
        content: "expand_more" / "";
        flex-shrink: 0;
        color: var(--primaryorg-800, #ff6720);
        font-family: "Material Symbols Rounded";
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        font-feature-settings: "liga";
    }

    .plan-tabs-dropdown__list {
        border-radius: 0 0 12px 12px;
        background: var(--white, #fff);
        box-shadow: 0 20px 24px -4px rgb(16 24 40 / 10%);
    }

    .plan-tabs-dropdown__option {
        color: var(--primary-800);
    }

    .plan-tabs-dropdown__option[aria-selected="true"],
    .plan-tabs-dropdown__option:hover {
        background: var(--primary-50);
    }

    .plan-tabs-dropdown__trigger:focus-visible {
        outline: 2px solid var(--primary-800);
        outline-offset: 3px;
    }
}

/*# sourceMappingURL=travelex.css.map */