/* Compatibility foundation retained from the previous ACE wrapper.
 * Keep API-provided coupon CSS later in the cascade. Frame styles are separate.
 * Root rem sizes and generic .button variants remain compatible with API modals.
 * Zero-specificity scopes preserve the prior cascade outside the new frame.
 */

body {
    margin: 0 auto;
    max-width: 20in;
    position: relative
}

:where(.vchf-content, .vchf-content *, .vchfy-modal, .vchfy-modal *),
:where(.vchf-content, .vchf-content *, .vchfy-modal, .vchfy-modal *)::after,
:where(.vchf-content, .vchf-content *, .vchfy-modal, .vchfy-modal *)::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

:where(.vchf-content, .vchf-content *, .vchfy-modal, .vchfy-modal *) {
    margin: 0
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.4
}

:where(.vchf-content, .vchfy-modal) canvas,
:where(.vchf-content, .vchfy-modal) img,
:where(.vchf-content, .vchfy-modal) picture,
:where(.vchf-content, .vchfy-modal) svg,
:where(.vchf-content, .vchfy-modal) video {
    display: block;
    max-width: 100%
}

:where(.vchf-content, .vchfy-modal) button,
:where(.vchf-content, .vchfy-modal) input,
:where(.vchf-content, .vchfy-modal) select,
:where(.vchf-content, .vchfy-modal) textarea {
    font: inherit
}

:where(.vchf-content, .vchfy-modal) h1,
:where(.vchf-content, .vchfy-modal) h2,
:where(.vchf-content, .vchfy-modal) h3,
:where(.vchf-content, .vchfy-modal) h4,
:where(.vchf-content, .vchfy-modal) h5,
:where(.vchf-content, .vchfy-modal) h6,
:where(.vchf-content, .vchfy-modal) p {
    overflow-wrap: anywhere
}

:where(.vchf-content, .vchfy-modal) .icon--xs {
    font-size: .5rem!important
}

:where(.vchf-content, .vchfy-modal) .icon--small {
    font-size: 1rem
}

:where(.vchf-content, .vchfy-modal) .icon--medium {
    font-size: 1.25rem
}

:where(.vchf-content, .vchfy-modal) .icon--large {
    font-size: 1.5rem
}

:where(.vchf-content, .vchfy-modal) .icon--xl {
    font-size: 2rem!important
}

:where(.vchf-content, .vchfy-modal) .icon--xxl {
    font-size: 3.5rem!important
}

html {
    color: #333;
    font-family: Fira Sans;
    font-weight: 300
}

@media(max-width: 768px) {
html {
        font-size:14px
    }
}

@media(min-width: 768px) {
html {
        font-size:1pc
    }
}

html body {
    font-size: 1rem;
    line-height: 1.4
}

html :where(.vchf-content, .vchfy-modal) h1,
html :where(.vchf-content, .vchfy-modal) h2,
html :where(.vchf-content, .vchfy-modal) h3,
html :where(.vchf-content, .vchfy-modal) h4,
html :where(.vchf-content, .vchfy-modal) h5,
html :where(.vchf-content, .vchfy-modal) h6 {
    font-weight: 500;
    line-height: 120%
}

html :where(.vchf-content, .vchfy-modal) h1 {
    font-size: 2.488rem
}

html :where(.vchf-content, .vchfy-modal) h2 {
    font-size: 2.074rem
}

html :where(.vchf-content, .vchfy-modal) h3 {
    font-size: 1.728rem
}

html :where(.vchf-content, .vchfy-modal) h4 {
    font-size: 1.44rem
}

html :where(.vchf-content, .vchfy-modal) h5 {
    font-size: 1.2rem
}

html :where(.vchf-content, .vchfy-modal) h6 {
    font-size: 1rem
}

html :where(.vchf-content, .vchfy-modal) b {
    font-weight: 500
}

html :where(.vchf-content, .vchfy-modal) i {
    font-style: italic
}

html :where(.vchf-content, .vchfy-modal) a {
    color: #e00019
}

html :where(.vchf-content, .vchfy-modal) a.hidden-link {
    color: #333;
    text-decoration: none
}

html :where(.vchf-content, .vchfy-modal) a.hidden-link:hover {
    color: #333
}

html :where(.vchf-content, .vchfy-modal) a.hidden-link:focus-visible {
    outline: none
}

html :where(.vchf-content, .vchfy-modal) a:hover {
    color: #ab0013
}

html :where(.vchf-content, .vchfy-modal) a:focus-visible {
    outline: 2px dashed #006994
}

html :where(.vchf-content, .vchfy-modal) a.anchor--secondary {
    color: #00364d
}

html :where(.vchf-content, .vchfy-modal) a.anchor--secondary:hover {
    color: #006994
}

html :where(.vchf-content, .vchfy-modal) a.anchor--secondary:focus-visible {
    outline: 2px dashed #006994
}

html :where(.vchf-content, .vchfy-modal) a.anchor--subtle {
    color: #333
}

html :where(.vchf-content, .vchfy-modal) a.anchor--subtle:hover {
    color: rgba(51,51,51,.698)
}

html :where(.vchf-content, .vchfy-modal) a.anchor--subtle:focus-visible {
    outline: 2px dashed #006994
}

html :where(.vchf-content, .vchfy-modal) a.anchor--inverse {
    color: #fafafa
}

html :where(.vchf-content, .vchfy-modal) a.anchor--inverse:hover {
    color: hsla(0,0%,98%,.698)
}

html :where(.vchf-content, .vchfy-modal) a.anchor--inverse:focus-visible {
    outline: 2px dashed #006994
}

html :where(.vchf-content, .vchfy-modal) a.anchor--no-decoration {
    text-decoration: none
}

html :where(.vchf-content, .vchfy-modal) ul li::marker {
    list-style-position: inside
}

.button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    border-radius: .375rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: 500;
    height: 2.5rem;
    min-width: 5rem;
    padding: 0 1rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.button i {
    font-size: 1.5rem
}

.button--small {
    height: 2rem;
    padding: 0 .5rem
}

.button--small i {
    font-size: 1rem
}

.button--xs {
    height: 1.25rem;
    padding: 0
}

.button--xs i {
    font-size: 1rem
}

.button__label-wrapper {
    margin: 0 .5rem
}

.button__label-wrapper--none {
    margin: 0
}

.button__label-wrapper--card {
    margin: 0 .25rem 0 0
}

.button__label-wrapper--small {
    font-size: .833rem;
    margin: 0 .25rem
}

.button__label-wrapper--xs {
    font-size: .694rem;
    font-weight: 300;
    margin: 0
}

.button--align-start {
    -ms-flex-item-align: start;
    align-self: flex-start
}

.button--align-end {
    -ms-flex-item-align: end;
    align-self: flex-end
}

.button__anchor {
    cursor: pointer;
    height: auto;
    line-height: 2.5rem;
    text-decoration: none
}

.button__anchor--card {
    line-height: 0rem;
    padding: 0
}

.button__anchor--full-width {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

@media(max-width: 768px) {
.button__anchor--full-width--medium {
        -webkit-box-pack:center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 576px) {
.button__anchor--full-width--small {
        -webkit-box-pack:center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%
    }
}

@media(max-width: 576px) {
.button__anchor--slim {
        line-height: inherit
    }
}

.button--primary {
    background: #e00019;
    color: #fafafa
}

.button--primary:hover {
    background: #ab0013;
    color: #fafafa;
    cursor: pointer
}

.button--primary:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(#e00019),to(#e00019));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(#e00019,#e00019)
}

.button--primary:disabled {
    background: rgba(51,51,51,.102);
    color: rgba(51,51,51,.502)
}

.button--primary--icon-only {
    font-size: 1.5rem;
    height: auto;
    min-width: unset;
    padding: .25rem;
    width: auto
}

.button--secondary {
    background: #00364d;
    color: #fafafa
}

.button--secondary:hover {
    background: #006994;
    color: #fafafa;
    cursor: pointer
}

.button--secondary:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(#00364d),to(#00364d));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(#00364d,#00364d)
}

.button--secondary:disabled {
    background: rgba(51,51,51,.102);
    color: rgba(51,51,51,.502)
}

.button--secondary-bright {
    background: rgba(0,85,120,.8);
    color: #fafafa
}

.button--secondary-bright:hover {
    background: #006994;
    color: #fafafa;
    cursor: pointer
}

.button--secondary-bright:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(#00364d),to(#00364d));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(#00364d,#00364d)
}

.button--secondary-bright:disabled {
    background: rgba(51,51,51,.102);
    color: rgba(51,51,51,.502)
}

.button--secondary-subtle {
    background: #00364d;
    color: #fafafa;
    gap: .25rem;
    height: unset;
    min-width: unset;
    padding: 0
}

.button--secondary-subtle:hover {
    background: #006994;
    color: #fafafa;
    cursor: pointer
}

.button--secondary-subtle:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(#00364d),to(#00364d));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(#00364d,#00364d)
}

.button--secondary-subtle:disabled {
    background: rgba(51,51,51,.102);
    color: rgba(51,51,51,.502)
}

.button--neutral {
    background: #333;
    color: #fafafa
}

.button--neutral:hover {
    background: #959595;
    cursor: pointer
}

.button--neutral:active {
    background: hsla(0,0%,98%,.102);
    color: #fafafa
}

.button--neutral:disabled {
    background: rgba(51,51,51,.102);
    color: rgba(51,51,51,.502)
}

.button--neutral--icon-only {
    font-size: 1.5rem;
    height: auto;
    min-width: unset;
    padding: .25rem;
    width: auto
}

.button--neutral-outlined {
    background: hsla(0,0%,98%,.8);
    border: .0625rem solid #333;
    color: #333
}

.button--neutral-outlined:hover {
    background: rgba(51,51,51,.102);
    color: #333;
    cursor: pointer
}

.button--neutral-outlined:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,98%,.8)),to(hsla(0,0%,98%,.8)));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(hsla(0,0%,98%,.8),hsla(0,0%,98%,.8))
}

.button--neutral-outlined:disabled {
    background: rgba(51,51,51,.102);
    border: none;
    color: rgba(51,51,51,.502)
}

.button--neutral-outlined-subtle {
    background: unset;
    border: .0625rem solid rgba(51,51,51,.2);
    color: rgba(51,51,51,.2)
}

.button--neutral-outlined-subtle:hover {
    background: rgba(51,51,51,.102);
    color: #333;
    cursor: pointer
}

.button--neutral-outlined-subtle:active {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2))),-webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,.2)),to(rgba(51,51,51,.2)));
    background: linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2)),linear-gradient(rgba(51,51,51,.2),rgba(51,51,51,.2))
}

.button--neutral-outlined-subtle:disabled {
    background: rgba(51,51,51,.102);
    border: none;
    color: rgba(51,51,51,.502)
}

.button--neutral-subtle {
    background: unset;
    color: #333;
    gap: .25rem;
    height: unset;
    min-width: unset;
    padding: 0
}

.button--neutral-subtle:hover {
    background: unset;
    color: rgba(51,51,51,.698);
    cursor: pointer
}

.button--neutral-subtle:active {
    background: unset;
    color: #333
}

.button--neutral-subtle:disabled {
    background: unset;
    color: rgba(51,51,51,.502)
}

.button--neutral-subtle--icon-only {
    font-size: 1.5rem;
    height: auto;
    min-width: unset;
    padding: .25rem;
    width: auto
}

.button--neutral-subtle--icon-only:hover {
    background: hsla(0,0%,98%,.051);
    color: #fafafa;
    cursor: pointer
}

.button--neutral-subtle--icon-only:active {
    background: hsla(0,0%,98%,.102);
    color: #fafafa
}

.button--inverted {
    background: #fcfcfc;
    color: #333
}

.button--inverted:hover {
    background: rgba(51,51,51,.102);
    color: #333;
    cursor: pointer
}

.button--inverted:active {
    background: rgba(51,51,51,.2);
    color: #333
}

.button--inverted:disabled {
    background: rgba(51,51,51,.102);
    color: #333
}

.button--inverted-subtle {
    background: unset;
    color: #fafafa
}

.button--inverted-subtle:hover {
    background: unset;
    color: hsla(0,0%,98%,.698);
    cursor: pointer
}

.button--inverted-subtle:active {
    background: unset;
    color: #fafafa
}

.button--inverted-subtle:disabled {
    background: unset;
    color: rgba(51,51,51,.502)
}

.button--inverted-subtle--icon-only {
    font-size: 1.5rem;
    height: auto;
    min-width: unset;
    padding: .25rem;
    width: auto
}

.button--inverted-subtle--icon-only:hover {
    background: hsla(0,0%,98%,.051);
    color: #fafafa;
    cursor: pointer
}

.button--inverted-subtle--icon-only:active {
    background: hsla(0,0%,98%,.102);
    color: #fafafa
}

.button:focus-visible {
    outline: .125rem dashed #006994;
    outline-offset: .125rem
}

:where(.vchf-content, .vchfy-modal) .hidden {
    visibility: hidden!important
}

:where(.vchf-content, .vchfy-modal) .display-none {
    display: none!important
}

:where(.vchf-content, .vchfy-modal) input::-webkit-inner-spin-button,
:where(.vchf-content, .vchfy-modal) input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

:where(.vchf-content, .vchfy-modal) input[type=number] {
    -moz-appearance: textfield
}

:where(.vchf-content, .vchfy-modal) input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(51,51,51,.102);
    border: .125rem solid #d9d9d9;
    border-radius: .25rem;
    height: 1.25rem;
    position: relative;
    width: 1.25rem
}

:where(.vchf-content, .vchfy-modal) input[type=checkbox]:checked:before {
    color: rgba(21,138,28,.8);
    content: "✔";
    font-size: 1rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 45%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

body {
            margin: 0;
            font-family: "Fira Sans";
            background: #fff;
            color: #333;
        }

main.vchf-content {
            max-width: 960px;
            margin: 40px auto;
            padding: 0 20px;
        }

.vchf-content img {
            max-width: 100%;
            height: auto;
        }
