/*! build: 78bf5ff @ 2026-09-10T19:27:04.126Z */
@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/v352/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxI.ttf) format("truetype");
    }

    .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);
}
}

@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);
}
}
/* @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: scroll;
}

#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: "";
    display: inline-block;
    width: var(--field-error-icon-size, 1.5rem);
    height: var(--field-error-icon-size, 1.5rem);
    margin: 0;
    background: transparent
        url(/content/dam/config/branding-stylesheets/master/icons/error-icon.svg)
        no-repeat left top;
    background-size: contain;
}

.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: 1;
}

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

/* 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 {
    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);
    background: var(--progress-nav-track-color, #ebebeb);
}
.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 {
    color: var(--header-nav-utility-icon-color, #f6834e);
    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: 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; }
}

@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) {
  .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: block;
    line-height: 40px;
    padding: 0 var(--size-3);
    color: var(--multiselect-option-color, #000);
    position: relative;
    max-height: 50px;
    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;
  grid-template-columns:minmax(250px,50%) repeat(var(--tier-count,3),1fr);
  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-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{

/* ---------------------------------------------------------------------------
   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; }

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

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

/* ---------- 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{
/* Site Width — constrains a container to a max-width and centers it */
.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;
}
}
@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{
/* 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{
@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; }
}
.u-hide-all { display: none !important; }
.hide { display: none !important; }
}
@layer utility.generic{
.btn-mobile-w-100 {
    display: flex;
    text-align: center;
}
.btn-w-100 > .cmp-button, .btn-w-100 > a {
    width: 100%;
}
@media screen and (max-width: 990px) {
    .btn-mobile-w-100, .btn-mobile-w-100 > .cmp-button, .btn-mobile-w-100 > a {
        width: 100%;
    }
}
}
@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;
    }

    #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;
        }
    }

    /* Layout for newsletter-banner only — its markup doesn't match
       start-quote-banner's (.title + .container grid), so it keeps
       its own flex layout, copied as-is from the now-removed rules
       that lived at travelex.css#L1002-1058. */
    #newsletter-banner {
        display: flex;
        align-items: center;
        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: flex;
        align-items: center;
        gap: var(--size-2);
    }

    #newsletter-banner .cmp-form-text label {
        flex: 1;
    }

    #newsletter-banner .cmp-form-text__text {
        flex: 0 1 300px;
        min-width: 300px;
        box-sizing: border-box;
    }

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

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

        #newsletter-banner .cmp-form-text {
            flex-direction: column;
            align-items: stretch;
        }

        #newsletter-banner .cmp-form-text__text {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
        }

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

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

    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 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 {

    :root {
        /** 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;
        --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-700);
        --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: var(--size-1);
        --field-error-panel-radius: var(--radius-size-1);
        --field-error-gap: var(--size-1);
        --field-error-panel-font-size: var(--font-size-3);

        /** 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-3);
        --progress-nav-circle-size: var(--size-6);
        --progress-nav-track-color: var(--gray-50);
        --progress-nav-track-text-color: var(--gray-300);
        --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-700);
        --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);

        /** 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;
    }

    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 {
        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 {
            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);
        }
    }

    /* 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: var(--size-1) var(--size-2);
        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-700);
        color: var(--gray-900);
        line-height: 1.5rem;
        border-radius: 0.5rem;
        width: 100%;
    }

    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(--primary-700);
        background-color: var(--white);
        color: var(--gray-900);
    }

    label,
    .Tokenize .cmp-tokenize-frame label {
        font-weight: var(--font-weight-4);
        font-size: var(--font-size-4);
        line-height: 1.6;
        margin: 0;
        color: var(--gray-900);
        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: scroll;                 
    }

    .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;
    }

    #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: 12px 20px;
        border-radius: .75rem;
        font-size: 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;
        }
    }

    .btn-secondary button,
    .btn-secondary>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-300);
        }
    }

    .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: 1.25rem;
        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 {
        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: 12px 20px;
        border-radius: .75rem;
        font-size: 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;
        }
    }

    .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;
        }
    }

    /** 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-600);
    }

    .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 {
        display: grid;
        grid-template-columns: 1.5rem 1fr;
        align-items: start;
        gap: 5px;
    }

    ul.checklist>li.check::before,
    ul.checklist>li.x::before {
        font-family: "Material Symbols Rounded";
        font-size: var(--font-size-6);
        width: 1.5rem;
        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) > .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 {
            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-options {
        border: none;
        box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .1), 0 -10px 8px -2px rgba(16, 24, 40, .05);
    }

    .drop .drop-options a:hover {
        color: var(--primary-800);
    }

    .drop {
        border: none;
    }

    .drop.open {
        outline: 1px solid var(--primarycta-900);
        border-radius: var(--radius-size-3);
    }

    #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;
    }

    .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;
    }
}

/* end @layer utility.brand */

/*# sourceMappingURL=travelex.css.map */