/* Back Friday 2026 redesign (/BackFriday?staging)
   Scoped under #bf26-hero so the site-wide globalStyle.css rules for the
   old page (#banner-sec-new, .zip-sec, etc.) cannot leak in. Selectors are
   prefixed "html body" to outrank globalStyle's `body#up-body-app p`
   (black, 16px), which otherwise beats a bare `#bf26-hero p`. */

/* ---------- Hero ---------- */

html body #bf26-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 718px;
    padding: 80px 24px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    /* Image is pre-flipped in the export (dark side on the left), so no transform needed */
    background:
        linear-gradient(180deg, rgba(40, 40, 42, 0) 45.62%, rgba(40, 40, 42, 0.6) 68.9%, #28282A 100%),
        url('/assets/images/back-friday/2026/hero-desktop.jpg') right center / cover no-repeat,
        #000;
}

html body #bf26-hero .bf26-hero__inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

html body #bf26-hero .bf26-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 588px;
}

html body #bf26-hero p {
    margin: 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

html body #bf26-hero .bf26-hero__eyebrow {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

html body #bf26-hero .bf26-hero__titles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 10px;
}

html body #bf26-hero .bf26-hero__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
}

html body #bf26-hero .bf26-hero__headline {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 55px;
    line-height: 70px;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: #fff;
}

html body #bf26-hero .bf26-hero__headline sup {
    top: -0.6em;
    font-size: 0.4em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* ZIP search: white field + teal button joined into one 50px pill */
html body #bf26-hero .bf26-hero__search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html body #bf26-hero .bf26-zip, html body #bf26-cta .bf26-zip {
    display: flex;
    width: 379px;
    max-width: 100%;
    height: 50px;
}

html body #bf26-hero .bf26-zip__field, html body #bf26-cta .bf26-zip__field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 100px;
    margin: 0;
    padding: 0 15px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    font-weight: 400;
    cursor: text;
}

html body #bf26-hero .bf26-zip__icon, html body #bf26-cta .bf26-zip__icon {
    flex: none;
    width: 24px;
    height: 24px;
}

html body #bf26-hero .bf26-zip__field .form-control, html body #bf26-cta .bf26-zip__field .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #28282A;
}

html body #bf26-hero .bf26-zip__field .form-control::placeholder, html body #bf26-cta .bf26-zip__field .form-control::placeholder {
    color: #757575;
    opacity: 1;
}

html body #bf26-hero .bf26-zip__btn, html body #bf26-cta .bf26-zip__btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 209px;
    padding: 0 12px;
    background: #40BEC7;
    border: 2px solid #fff;
    border-radius: 0 12px 12px 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: 0.03em;
    color: #000;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

html body #bf26-hero .bf26-zip__btn:hover, html body #bf26-cta .bf26-zip__btn:hover,
html body #bf26-hero .bf26-zip__btn:focus, html body #bf26-cta .bf26-zip__btn:focus {
    background: #2fa9b2;
}

html body #bf26-hero .bf26-hero__help {
    /* !important: master.css forces `#up-body-app section p` to 16px !important */
    font-size: 14px !important;
    line-height: 20px !important;
}

html body #bf26-hero .bf26-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html body #bf26-hero .bf26-hero__copy p {
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Hero: tablet ---------- */

@media (max-width: 1199px) {
    html body #bf26-hero {
        min-height: 620px;
        background-position: 70% center, 70% center, 0 0;
    }
}

/* Line breaks that only apply on one side of the mobile breakpoint */
html body #bf26-hero .bf26-mbr {
    display: none;
}

@media (max-width: 767px) {
    html body #bf26-hero .bf26-mbr {
        display: inline;
    }

    html body #bf26-hero .bf26-dbr {
        display: none;
    }
}

/* Mobile-only photo block between the ZIP search and the copy */
html body #bf26-hero .bf26-hero__photo {
    display: none;
}

/* ---------- Hero: mobile (Figma 390: text on black, square photo, copy on charcoal) ---------- */

@media (max-width: 767px) {
    html body #bf26-hero {
        display: block;
        min-height: 0;
        padding: 60px 20px 0;
        background: #000;
    }

    html body #bf26-hero .bf26-hero__text {
        align-items: stretch;
        gap: 40px;
        max-width: none;
    }

    html body #bf26-hero .bf26-hero__titles {
        gap: 20px;
        padding-bottom: 20px;
    }

    html body #bf26-hero .bf26-hero__title {
        font-size: 22px;
    }

    html body #bf26-hero .bf26-hero__headline {
        font-size: 38px;
        line-height: 38px;
    }

    html body #bf26-hero .bf26-zip {
        width: 100%;
    }

    html body #bf26-cta .bf26-zip {
        width: 100%;
    }

    /* Full-bleed square photo: fades in from the black above and out into the charcoal below.
       The export is already flipped (tree on the left), so no transform. */
    html body #bf26-hero .bf26-hero__photo {
        display: block;
        margin: -40px -20px 0;
        aspect-ratio: 1 / 1;
        background:
            linear-gradient(0deg, rgba(0, 0, 0, 0) 88.99%, #000 100%),
            linear-gradient(180deg, rgba(40, 40, 42, 0) 54.28%, rgba(40, 40, 42, 0.6) 73.29%, #28282A 96.53%),
            url('/assets/images/back-friday/2026/hero-mobile.jpg') center / cover no-repeat;
    }

    html body #bf26-hero .bf26-hero__copy {
        gap: 16px;
        margin: -40px -20px 0;
        padding: 40px 20px;
        background: #28282A;
    }
}

/* ---------- Proof points (charcoal strip under the hero) ---------- */

html body #bf26-proof {
    padding: 40px 24px 20px;
    background: #28282A;
    font-family: 'Inter', sans-serif;
}

html body #bf26-proof .bf26-proof__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
}

html body #bf26-proof .bf26-proof__item {
    display: flex;
    align-items: center;
    gap: 15px;
}

html body #bf26-proof .bf26-proof__item img {
    flex: none;
    width: 48px;
    height: 48px;
}

html body #bf26-proof .bf26-proof__item span {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: #F4F4F3;
}

@media (max-width: 1199px) {
    html body #bf26-proof .bf26-proof__inner {
        gap: 24px;
    }

    html body #bf26-proof .bf26-proof__item span {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 767px) {
    html body #bf26-proof {
        padding: 8px 20px 32px;
    }

    html body #bf26-proof .bf26-proof__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    html body #bf26-proof .bf26-proof__item img {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Pricing cards (before ZIP) ---------- */

html body #bf26-pricing {
    position: relative;
    padding: 40px 24px 120px;
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(50% 148.52% at 50% 7.58%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
        #28282A;
}

/* Wavy lower edge of the proof-points strip, drawn over the spotlight */
html body #bf26-pricing .bf26-pricing__wave {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 40px;
}

/* Keeps id="black-box-sections" for the injected after-ZIP cards; cancel its 80px padding */
html body #bf26-pricing #black-box-sections {
    padding: 80px 0 0;
}

html body #bf26-pricing .bf26-pricing__cards {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Most Popular card's pill makes it taller; keep all three equal */
    gap: 40px;
}

html body #bf26-pricing .bf26-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    width: 400px;
    min-height: 490px;
    padding: 50px 40px;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

html body #bf26-pricing .bf26-card--popular {
    border: 3px solid #40BEC7;
}

html body #bf26-pricing .bf26-card__type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

html body #bf26-pricing .bf26-card__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    background: #40BEC7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: #000;
}

html body #bf26-pricing .bf26-card__name {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: #000;
}

html body #bf26-pricing .bf26-card__offer {
    font-size: 36px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #000;
}

html body #bf26-pricing .bf26-card__offer sup {
    top: -0.8em;
    font-size: 0.5em;
}

html body #bf26-pricing .bf26-card__local {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    padding: 12px 10px;
    background: #F2F8FB;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

html body #bf26-pricing .bf26-card__local-icon {
    flex: none;
    width: 42px;
    height: 42px;
}

html body #bf26-pricing .bf26-card__local-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

html body #bf26-pricing .bf26-card__local-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #006998;
}

html body #bf26-pricing .bf26-card__local-body {
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    color: #28282A;
}

html body #bf26-pricing .bf26-card__local-hint {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1299px) {
    html body #bf26-pricing .bf26-pricing__cards {
        gap: 24px;
    }

    html body #bf26-pricing .bf26-card {
        flex: 1 1 0;
        width: auto;
        max-width: 400px;
        padding: 40px 28px;
    }

    html body #bf26-pricing .bf26-card__offer {
        font-size: 30px;
    }
}

/* Figma 390: 40px wave, then 60/20/80 padding; card 40/20 with the name + offer
   block inset a further 20px, 40px between blocks, 30px between cards */
@media (max-width: 767px) {
    html body #bf26-pricing {
        padding: 0 20px 80px;
        background:
            radial-gradient(2751.82% 100% at 50% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%),
            #28282A;
    }

    html body #bf26-pricing #black-box-sections {
        padding-top: 100px;
    }

    html body #bf26-pricing .bf26-pricing__cards {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    html body #bf26-pricing .bf26-card {
        flex: none;
        max-width: none;
        min-height: 0;
        gap: 40px;
        padding: 40px 20px;
    }

    /* Figma strokes don't take layout space; ours do, so trim the padding by the border width */
    html body #bf26-pricing .bf26-card {
        padding: 40px 18px;
        letter-spacing: 0;
    }

    html body #bf26-pricing .bf26-card--popular {
        padding: 40px 17px;
    }

    html body #bf26-pricing .bf26-card__type,
    html body #bf26-pricing .bf26-card__offer {
        padding: 0 20px;
    }

    html body #bf26-pricing .bf26-card__local-text > div {
        letter-spacing: 0;
    }

    html body #bf26-pricing .bf26-card__offer {
        font-size: 36px;
    }
}

/* ---------- Pricing cards (after ZIP) ----------
   Built in JS (bf26PriceCards) from the server's 2025 package HTML; same card
   shell as the before-ZIP cards, with the local prices in place of the ZIP prompt. */

html body #bf26-pricing .bf26-pricing__cards--priced .bf26-card {
    gap: 40px;
}

html body #bf26-pricing .bf26-card__per,
html body #bf26-pricing .bf26-card__total {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html body #bf26-pricing .bf26-card__per-main {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: #000;
}

html body #bf26-pricing .bf26-card__amt {
    color: #256E7B;
}

html body #bf26-pricing .bf26-card__total-amt {
    font-size: 48px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -0.02em;
    color: #256E7B;
}

html body #bf26-pricing .bf26-card__sub {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.5);
}

/* Figma 390 (after ZIP): 40px card padding with no extra inset, 40px between blocks,
   20px inside the per-visit and total blocks, 45px teal total */
@media (max-width: 767px) {
    html body #bf26-pricing .bf26-pricing__cards--priced .bf26-card {
        gap: 40px;
        padding: 40px 38px; /* 40 minus the 2px border */
    }

    html body #bf26-pricing .bf26-pricing__cards--priced .bf26-card--popular {
        padding: 40px 37px;
    }

    html body #bf26-pricing .bf26-pricing__cards--priced .bf26-card__type,
    html body #bf26-pricing .bf26-pricing__cards--priced .bf26-card__offer {
        padding: 0;
    }

    html body #bf26-pricing .bf26-card__per,
    html body #bf26-pricing .bf26-card__total {
        gap: 20px;
    }

    html body #bf26-pricing .bf26-card__per .bf26-card__sub {
        font-weight: 500;
        line-height: 28px;
    }

    html body #bf26-pricing .bf26-card__total .bf26-card__sub {
        line-height: 28px;
    }

    html body #bf26-pricing .bf26-card__total-amt {
        font-size: 45px;
        line-height: 54px;
        color: #007C88;
    }
}

/* ---------- Clinic listing (after ZIP) ----------
   Restyles the server-built _clinicListing_backFriday fragment (shared with the
   live page, so only overridden here); bf26TidyListing fixes its text.
   body#up-body-app adds a second id to outrank globalStyle's long
   `#up-body-app .bf-clinic-map-route-sec ... .back-clinic-div` chains; !important
   only where globalStyle itself uses it. */

html body#up-body-app #location-sec.bf26-finder-sec .back-clinic-div {
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic_area_details {
    position: relative;
    z-index: 1;
    width: auto;
    margin: 0 !important;
    padding: 28px 28px 24px;
    background: #fff;
    border: 0;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic_area_details-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 !important;
}

html body#up-body-app #location-sec.bf26-finder-sec .area-deatils {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #256E7B;
}

html body#up-body-app #location-sec.bf26-finder-sec .walk-deatils {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

html body#up-body-app #location-sec.bf26-finder-sec .bf-clinic-list-wrap-inner {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 24px 24px !important;
    background: #fff;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper {
    padding: 0;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .accordian {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 24px 26px !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .accordian.bf26-selected {
    padding: 23px 25px !important; /* keep the box size with the thicker border */
    border: 2px solid #49A1AD !important;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 a,
html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 a span {
    font: inherit;
    color: #256E7B;
    text-decoration: none;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 12px 0 0;
    padding: 0;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li,
html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li span {
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    line-height: 20px;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li:first-child,
html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li:first-child span {
    font-weight: 700;
    color: #256A37 !important;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li .cst-closed {
    color: #C62828 !important;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li .coming-soon {
    color: #B7791F !important;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status .clinic-status-dis {
    font-weight: 400;
    color: #28282A;
}

/* Our own separator dot; the legacy li:after dot is absolutely positioned and lands off-place */
html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li:after {
    display: none;
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-status .clinic-status-dis::before {
    content: '\2022';
    margin: 0 10px;
    color: rgba(0, 0, 0, 0.3);
}

html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .address {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #28282A;
}

/* Figma 390 (after ZIP): map 292px, then a 20px-padded heading box, then a flat
   410px scrolling list (no card borders) with inset 1px dividers */
@media (max-width: 767px) {
    html body#up-body-app #location-sec.bf26-finder-sec {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    html body#up-body-app #location-sec.bf26-finder-sec .map-sec {
        height: 292px !important;
        min-height: 0 !important;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .back-clinic-div {
        height: auto !important;
        padding-bottom: 20px;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic_area_details {
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    html body#up-body-app #location-sec.bf26-finder-sec .area-deatils {
        font-size: 22px;
        line-height: 30px;
        color: #007C88;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .bf-clinic-list-wrap-inner {
        height: 410px;
        padding: 10px 0 20px !important;
        overflow-y: auto;
        border-radius: 12px 12px 0 0;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper::after {
        content: '';
        display: block;
        margin: 10px 20px;
        border-top: 1px solid #C0C0C0;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .accordian,
    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .accordian.bf26-selected {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0;
        padding: 10px 20px !important;
        border: 0 !important;
        border-radius: 0;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .accordian-arrow {
        display: none !important;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 a,
    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper h3 a span {
        color: #007C88;
        text-decoration: underline;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status {
        margin: 0;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li,
    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li span {
        font-size: 14px !important;
        line-height: 20px;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li:first-child,
    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status li:first-child span {
        color: #01743D !important;
    }

    /* 4px grey dot with 15px either side */
    html body#up-body-app #location-sec.bf26-finder-sec .clinic-status .clinic-status-dis::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        margin: 0 15px;
        border-radius: 50%;
        background: #BEBEC2;
        vertical-align: middle;
    }

    html body#up-body-app #location-sec.bf26-finder-sec .clinic-wrapper .address {
        margin-top: 0;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ---------- Clinic finder (before ZIP) ----------
   Lives inside #location-sec so the injected after-ZIP listing keeps its old
   styles; that id also carries legacy h2/padding rules, overridden here. */

html body #location-sec.bf26-finder-sec {
    padding: 0;
    border-top: 0;
    font-family: 'Inter', sans-serif;
}

html body #location-sec .bf26-finder {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto; /* .append_clinicDetails is itself a flex row; fill it */
    width: 100%;
    height: 610px;
}

html body #location-sec .bf26-finder__panel {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 440px;
    background: #FAF9F9;
}

html body #location-sec .bf26-finder__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px 20px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    position: relative; /* keep the shadow above the grey panel */
}

html body #location-sec .bf26-finder__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0;
    color: #007C88;
}

html body #location-sec .bf26-finder__geo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #28282A;
    white-space: nowrap;
    cursor: pointer;
}

/* .bf26-finder-sec outranks globalStyle's `#location-sec.back_loc .append_clinicDetails img { width:100% }` */
html body #location-sec.bf26-finder-sec .bf26-finder__geo img {
    flex: none;
    width: 24px;
    height: 24px;
}

html body #location-sec .bf26-finder__geo span {
    text-decoration: underline;
}

html body #location-sec .bf26-finder__search {
    display: flex;
    gap: 8px;
    padding: 20px 20px 0;
}

html body #location-sec .bf26-finder__zip {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 100px;
    height: 50px;
    padding: 14px 20px 14px 15px;
    background: #fff;
    border: 1px solid #007FB3;
    border-radius: 12px;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #28282A;
}

html body #location-sec .bf26-finder__zip::placeholder {
    color: rgba(40, 40, 42, 0.3);
    opacity: 1;
}

html body #location-sec .bf26-finder__go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    background: #007FB3;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

html body #location-sec .bf26-finder__go:hover,
html body #location-sec .bf26-finder__go:focus {
    background: #006a96;
}

html body #location-sec .bf26-finder__msg {
    padding: 8px 20px 0;
    font-size: 14px;
    line-height: 20px;
    color: #28282A;
}

html body #location-sec .bf26-finder__map {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

@media (max-width: 767px) {
    html body #location-sec .bf26-finder {
        flex-direction: column;
        height: auto;
    }

    /* Figma 390: map on top (292px), white head card, then the ZIP row on grey */
    html body #location-sec .bf26-finder__panel {
        width: auto;
        padding-bottom: 20px;
    }

    html body #location-sec .bf26-finder__head {
        padding: 20px;
    }

    html body #location-sec .bf26-finder__search {
        padding: 20px 20px 0;
    }

    html body #location-sec .bf26-finder__msg:empty {
        display: none;
    }

    html body #location-sec .bf26-finder__map {
        order: -1;
        flex: none;
        height: 292px;
    }
}

/* ---------- Benefits ("Flexible Way To Stay Connected To Care") ---------- */

html body #bf26-benefits {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 120px 24px;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

html body #bf26-benefits .bf26-benefits__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 960px;
    text-align: center;
}

html body #bf26-benefits .bf26-benefits__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
    letter-spacing: 0;
    text-transform: none;
    color: #007C88;
}

html body #bf26-benefits .bf26-benefits__lead {
    font-size: 18px;
    line-height: 28px;
    color: #000;
}

html body #bf26-benefits .bf26-benefits__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 80px;
    width: 100%;
    max-width: 1280px;
}

html body #bf26-benefits .bf26-benefit {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Illustrations sit on a common baseline inside a 300px stage */
html body #bf26-benefits .bf26-benefit__art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 300px;
    margin-bottom: 20px;
}

html body #bf26-benefits .bf26-benefit__art--hsa {
    padding-right: 20px;
}

html body #bf26-benefits .bf26-benefit__art img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 300px;
    object-fit: contain;
}

html body #bf26-benefits .bf26-benefit__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: none;
    color: #28282A;
}

html body #bf26-benefits .bf26-benefit__copy {
    font-size: 16px;
    line-height: 24px;
    color: #28282A;
}

html body #bf26-benefits .bf26-benefit__copy a {
    color: #007C88;
    text-decoration: underline;
}

@media (max-width: 1199px) {
    html body #bf26-benefits .bf26-benefits__grid {
        gap: 40px;
    }
}

/* Figma 390: 80/20 padding, 50 between intro and items; title centered (it also
   has to beat globalStyle's mobile `body#up-body-app h2 { text-align:left }`),
   lead left-aligned; each item is a 300px art stage, 40px, then title/copy 20px apart */
@media (max-width: 767px) {
    html body #bf26-benefits {
        gap: 50px;
        padding: 80px 20px;
    }

    html body #bf26-benefits .bf26-benefits__intro {
        align-self: stretch;
        gap: 40px;
        text-align: left;
    }

    html body #bf26-benefits .bf26-benefits__title {
        max-width: 315px;
        text-align: center;
    }

    html body #bf26-benefits .bf26-benefits__lead {
        align-self: stretch;
    }

    html body #bf26-benefits .bf26-benefits__grid {
        flex-direction: column;
        gap: 40px;
    }

    html body #bf26-benefits .bf26-benefit {
        min-width: 0;
    }

    html body #bf26-benefits .bf26-benefit__art {
        margin-bottom: 20px; /* + the item's 20px gap = Figma's 40px */
    }

    html body #bf26-benefits .bf26-benefit__art--hsa {
        padding-right: 0;
    }
}

/* ---------- Testimonial ("Ready For The Next Cue") ---------- */

html body #bf26-testimonial {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 600px;
    padding: 80px 24px 80px 120px;
    font-family: 'Inter', sans-serif;
    /* Export already carries the black-to-photo gradient; black fills wide screens */
    background: #000 url('/assets/images/back-friday/2026/testimonial-desktop.jpg') right center / cover no-repeat;
}

html body #bf26-testimonial .bf26-testimonial__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    max-width: 667px;
}

html body #bf26-testimonial .bf26-testimonial__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html body #bf26-testimonial .bf26-testimonial__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 57px;
    font-weight: 900;
    line-height: 64px;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    white-space: nowrap; /* browser Inter renders a few px wider than Figma's 667px box */
    color: #fff;
}

html body #bf26-testimonial .bf26-testimonial__body {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

html body #bf26-testimonial .bf26-testimonial__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 30px 0 23px;
    background: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: 0.03em;
    color: #000;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

html body #bf26-testimonial .bf26-testimonial__btn:hover,
html body #bf26-testimonial .bf26-testimonial__btn:focus {
    background: #e6e6e6;
    color: #000;
    text-decoration: none;
}

@media (max-width: 1199px) {
    html body #bf26-testimonial {
        padding-left: 48px;
    }

    html body #bf26-testimonial .bf26-testimonial__text {
        max-width: 520px;
    }

    html body #bf26-testimonial .bf26-testimonial__title {
        white-space: normal;
    }
}

/* Figma 390: square photo (overlay baked into the export), text pinned to the bottom.
   Figma clips the body copy to 3 lines; the real copy is ~8, so the square is a minimum. */
@media (max-width: 767px) {
    html body #bf26-testimonial {
        min-height: 100vw;
        padding: 40px 20px;
        background: #000 url('/assets/images/back-friday/2026/testimonial-mobile.jpg') center / cover no-repeat;
    }

    html body #bf26-testimonial .bf26-testimonial__text {
        gap: 30px;
        max-width: none;
    }

    html body #bf26-testimonial .bf26-testimonial__title {
        font-size: 36px;
        line-height: 44px;
    }

    html body #bf26-testimonial .bf26-testimonial__btn {
        height: 50px;
    }
}

/* ---------- Benefits of care ("Stay Aligned. Keep Moving. Feel Your Best.") ---------- */

html body #bf26-care {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 120px 24px;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

html body #bf26-care .bf26-care__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 960px;
    text-align: center;
}

html body #bf26-care .bf26-care__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
    letter-spacing: 0;
    text-transform: none;
    color: #007C88;
}

html body #bf26-care .bf26-care__lead {
    font-size: 18px;
    line-height: 28px;
    color: #000;
}

html body #bf26-care .bf26-care__lead a {
    color: #007C88;
    text-decoration: underline;
}

html body #bf26-care .bf26-care__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 350px));
    justify-content: space-between;
    gap: 50px 115px;
    width: 100%;
    max-width: 1280px;
    padding-bottom: 10px;
}

html body #bf26-care .bf26-care__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

html body #bf26-care .bf26-care__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px; /* 20px icon-to-title per Figma (10px item gap + 10px) */
}

html body #bf26-care .bf26-care__icon img {
    display: block;
    width: auto;
    max-width: 52px;
    height: 48px;
}

html body #bf26-care .bf26-care__name {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: none;
    color: #28282A;
}

html body #bf26-care .bf26-care__copy {
    font-size: 14px;
    line-height: 20px;
    color: #28282A;
}

@media (max-width: 1199px) {
    html body #bf26-care .bf26-care__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 64px;
    }
}

html body #bf26-care .bf26-care__dots {
    display: none;
}

/* Figma 390: 80/20/20 padding, 50px between intro, carousel and dots; one item per
   slide (scroll-snap, swipeable), 6 dots below. Title is centered (beats globalStyle's
   mobile h2 left-align), lead left-aligned. */
@media (max-width: 767px) {
    html body #bf26-care {
        gap: 50px;
        padding: 80px 20px 20px;
    }

    html body #bf26-care .bf26-care__intro {
        align-self: stretch;
        gap: 40px;
        text-align: left;
    }

    html body #bf26-care .bf26-care__title {
        text-align: center;
    }

    html body #bf26-care .bf26-care__grid {
        display: flex;
        align-items: flex-start;
        gap: 0;
        padding-bottom: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html body #bf26-care .bf26-care__grid::-webkit-scrollbar {
        display: none;
    }

    html body #bf26-care .bf26-care__item {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    html body #bf26-care .bf26-care__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    html body #bf26-care .bf26-care__dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #C4C4C4;
        transition: background-color 0.15s ease;
    }

    html body #bf26-care .bf26-care__dots span.is-active {
        background: #000;
    }
}

/* ---------- CareCredit + closing CTA ----------
   One wrapper carries the photo (fade baked into the export); the CTA's arched
   charcoal band overlaps the photo's lower edge as in the Figma frame. */

html body #bf26-carecredit {
    font-family: 'Inter', sans-serif;
    /* Photo is sized to the 790px frame height (not the page width) so the whole
       photo shows at every desktop width; the base color matches the photo's left fade.
       The closing CTA is pulled up far enough that its arch corners meet the photo's
       bottom edge, so no base color shows between photo and band. */
    background:
        linear-gradient(90deg, #F2F4F7, rgba(242, 244, 247, 0) 160px) right top / 1522px 790px no-repeat,
        url('/assets/images/back-friday/2026/carecredit-desktop.jpg') right top / auto 790px no-repeat,
        #F2F4F7;
}

html body #bf26-carecredit .bf26-cc {
    display: flex;
    align-items: center;
    max-width: 1489px; /* 1729 frame - 2 x 120 padding */
    min-height: 790px;
    margin: 0 auto;
    padding: 120px;
    box-sizing: border-box;
}

html body #bf26-carecredit .bf26-cc__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    width: 724px;
    max-width: 100%;
    padding: 60px 80px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

html body #bf26-carecredit .bf26-cc__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

html body #bf26-carecredit .bf26-cc__logo {
    display: block;
    width: 244px;
    height: auto;
}

html body #bf26-carecredit .bf26-cc__title {
    max-width: 500px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
    letter-spacing: 0;
    text-transform: none;
    color: #28282A;
}

html body #bf26-carecredit .bf26-cc__copy {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #28282A;
}

html body #bf26-carecredit .bf26-cc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    background: #40BEC7;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: 0.03em;
    color: #000;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

html body #bf26-carecredit .bf26-cc__btn:hover,
html body #bf26-carecredit .bf26-cc__btn:focus {
    background: #2fa9b2;
    color: #000;
    text-decoration: none;
}

/* Arched top: the charcoal band lives on a ::before that is a full half-ellipse
   (vertical radius 100%) stretched 1.5x wider than the section and clipped by it,
   so the dome is deep and smooth while the text and button stay unscaled. */
html body #bf26-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -80px; /* arch rises ~75px at the edges (25% of 296px), so -80px puts the corners at the photo's bottom edge */
    padding: 90px 24px 70px;
    background: none;
    border-radius: 0;
}

html body #bf26-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(100% 224.93% at 100% 118.99%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #28282A;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.5);
    transform-origin: 50% 0;
}

html body #bf26-cta .bf26-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

html body #bf26-cta .bf26-cta__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

html body #bf26-cta .bf26-cta__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
    letter-spacing: 0;
    text-transform: none;
    color: #40BEC7;
}

html body #bf26-cta .bf26-cta__copy {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

html body #bf26-cta .bf26-cta__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-bottom: 10px;
}

html body #bf26-cta .bf26-cta__label {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    color: #fff;
}

@media (max-width: 1199px) {
    html body #bf26-carecredit .bf26-cc {
        padding: 80px 48px 120px;
    }

    html body #bf26-carecredit .bf26-cc__card {
        width: 600px;
        padding: 48px;
    }
}

html body #bf26-carecredit .bf26-cc__photo {
    display: none;
}

/* Figma 390: text on white (no card), then a square photo fading to white at the top,
   then the CTA, whose 30px arch overlaps the photo's bottom edge */
@media (max-width: 767px) {
    html body #bf26-carecredit {
        background: #fff;
    }

    html body #bf26-carecredit .bf26-cc {
        position: relative;
        z-index: 1; /* photo's top 30px tucks under the text block, as in Figma */
        min-height: 0;
        padding: 80px 20px 0;
        background: #fff;
    }

    html body #bf26-carecredit .bf26-cc__card {
        gap: 50px;
        width: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    html body #bf26-carecredit .bf26-cc__copy {
        font-size: 18px;
        line-height: 28px;
    }

    html body #bf26-carecredit .bf26-cc__photo {
        display: block;
        aspect-ratio: 1 / 1;
        margin: -30px 0;
        background:
            linear-gradient(353.92deg, rgba(255, 255, 255, 0) 69.89%, #fff 95.18%),
            url('/assets/images/back-friday/2026/carecredit-mobile.jpg') center / cover no-repeat;
    }

    html body #bf26-cta {
        margin-top: -60px; /* arch overlaps the photo (the photo already has a -30px bottom margin) */
        padding: 80px 20px;
    }

    html body #bf26-cta::before {
        background: radial-gradient(100% 135.64% at 100% 71.76%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #28282A;
        /* The band is ~540px tall on mobile; a 100% vertical radius makes a tombstone
           that cuts into the headline. Cap the dome so it rises ~40px at the edges. */
        border-radius: 50% 50% 0 0 / 160px 160px 0 0;
    }

    html body #bf26-cta .bf26-cta__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 60px;
    }

    html body #bf26-cta .bf26-cta__action {
        padding-bottom: 0;
    }

    html body #bf26-cta .bf26-cta__label {
        text-align: center;
    }
}

/* No clinic near the ZIP: message in place of the price cards */
html body #bf26-pricing .bf26-pricing__empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
}
html body #bf26-pricing .bf26-pricing__empty p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.5;
    color: #28282A;
}
html body #bf26-pricing .bf26-pricing__empty .bf26-pricing__empty-title {
    font-weight: 700;
    font-size: 24px;
}
html body #bf26-pricing .bf26-pricing__empty a {
    color: #28282A;
    text-decoration: underline;
}