/* Keep the callback form inside the first-screen hero, in normal flow. */
.inner-section.health-program-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100svh - 80px);
    padding-bottom: 20px;
}

.inner-section.health-program-hero > .inner-slider {
    flex: 1 0 auto;
    height: auto;
    padding-bottom: 24px;
}

.inner-section.health-program-hero .inner-slider--content.mt-small {
    margin-top: clamp(32px, 7svh, 100px);
}

.inner-section.health-program-hero > .inner-section--bottom:has(form) {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    background: transparent;
}

.health-program-hero .lc-callback--inner {
    height: auto;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@media (max-width: 1024px) {
    .inner-section.health-program-hero {
        min-height: 0;
        padding-bottom: 0;
    }

    .inner-section.health-program-hero > .inner-bg {
        height: 640px;
    }

    .inner-section.health-program-hero > .inner-slider {
        flex: none;
        height: 640px;
        padding-bottom: 0;
    }

    .inner-section.health-program-hero > .inner-section--bottom:has(form) {
        background: var(--light);
    }

    .inner-section.health-program-hero .inner-slider--content.mt-small {
        margin-top: 24px;
    }

    .health-program-hero .lc-callback {
        padding: 40px 0 60px;
    }

    /* card padding, gaps and the button order (title, fields, check boxes, button LAST) come from the global
       .lc-callback rules in layout.css; the hero only sets its own title size and the button size */
    .health-program-hero .lc-callback--inner {
        padding: 24px 20px 28px;
        gap: 12px;
    }

    .health-program-hero .lc-callback--inner-top .content--title .lc-typography--h4 {
        font-size: 20px;
        line-height: 24px;
    }

    .health-program-hero .lc-callback .life-club-button {
        position: static;
        width: 100%;
        height: 56px;
    }
}

.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

    .background-video.desktop {
        display: none;
    }

    .background-video.mobile {
        display: block;
    }

@media (min-width: 768px) {
    .background-video.desktop {
        display: block;
    }

    .background-video.mobile {
        display: none;
    }
}


/* White page background around the hero card, continuous with the white header */
body:has(.health-program-hero),
body:has(.health-program-contact-bar .banner-xl),
body:has(.banner-xl) {
    background-color: #fff;
}

/* Cookiebot writes an inline `padding-top: 0px` on <body> when it shows its banner (first-time visitors,
   e.g. SMS / ad campaign traffic). That wipes the fixed-header offset and slides the hero under the header,
   so the title looks cut off. !important in a stylesheet beats the non-important inline style. */
body:has(.health-program-hero) {
    padding-top: 80px !important;
}

@media (min-width: 1025px) {
    body:has(.health-program-hero) {
        padding-top: 88px !important;
    }
}

/* ------------------------------------------------------------------
   Rounded hero card + overlapping callback form (all /saglik-programlari pages)
   The card is slightly wider than the container so it scales on large screens.
------------------------------------------------------------------- */
.inner-section.health-program-hero {
    /* One gap value: below the header, on both sides and below the form are all equal, on every screen size */
    --hp-gap: clamp(12px, 1.25vw, 24px);
    --hp-gutter: max(0px, calc(var(--hp-gap) + 32px - (100vw - min(100vw, var(--container-width))) / 2));
    --hp-radius: 32px;
    --hp-form-half: 90px; /* half of the form card height, set by JS */
    --hp-navy: #25215f;
    margin: var(--hp-gap) var(--hp-gap) 0;
    border-radius: var(--hp-radius);
}

.health-program-hero .inner-slider > .container,
.health-program-hero .inner-section--bottom > .container {
    padding-inline: var(--hp-gutter);
}

.health-program-hero > .inner-bg {
    border-radius: inherit;
    overflow: hidden;
}

.health-program-hero > .inner-bg img,
.health-program-hero > .inner-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.health-program-hero .lc-callback--inner {
    background: #fff;
    border-radius: 24px;
}

@media (min-width: 1025px) {
    /* The form card is centred on the bottom edge of the banner: half inside, half below */
    .inner-section.health-program-hero {
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: calc(var(--hp-form-half) + var(--hp-gap));
        /* banner leaves the same gap at the bottom of the first screen as at the top; the form's lower half sits below the fold */
        min-height: calc(100svh - 88px - 2 * var(--hp-gap));
    }

    .inner-section.health-program-hero > .inner-slider {
        padding-bottom: calc(var(--hp-form-half) + 24px);
    }

    .inner-section.health-program-hero > .inner-section--bottom:has(form) {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 2;
        transform: translateY(50%);
        margin: 0;
        padding: 0;
    }

    .health-program-hero .lc-callback--inner {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) 2fr;
        column-gap: 32px;
        row-gap: 14px;
        align-items: center;
        padding: 28px 40px;
        box-shadow: 0 12px 40px rgba(37, 33, 95, .12);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .health-program-hero .lc-callback--inner-top {
        display: contents;
    }

    .health-program-hero .lc-callback--inner-top > .content {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .health-program-hero .lc-callback--inner-top > .form--actions {
        grid-column: 2;
        grid-row: 1;
        flex: none;
    }

    .health-program-hero .lc-callback--inner-bottom {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        gap: 24px;
    }

    .health-program-hero .lc-callback .life-club-button {
        flex: 0 0 auto;
        min-width: 190px;
    }

    /* Tidy form: equal control heights, even spacing, calmer consent text */
    .health-program-hero .lc-callback--inner {
        column-gap: 40px;
        row-gap: 16px;
        padding: 32px 40px;
    }

    .health-program-hero .lc-callback--inner-top .content--title .lc-typography--h4 {
        font-size: 28px;
        line-height: 36px;
        font-weight: 600;
    }

    .health-program-hero .lc-callback--inner-top > .content {
        align-self: start;
    }

    .health-program-hero .lc-callback--inner-top .content--title {
        align-items: flex-start;
    }

    .health-program-hero .lc-callback--inner-top > .form--actions {
        gap: 12px;
        align-items: center;
    }

    .health-program-hero .lc-callback .form-item input:not([type=checkbox]),
    .health-program-hero .lc-callback .life-club-button {
        height: 52px;
        padding-block: 0;
        font-size: 15px;
        line-height: 1;
    }

    .health-program-hero .lc-callback .iti {
        display: block;
        width: 100%;
    }

    .health-program-hero .lc-callback--inner-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 12px 32px;
    }

    .health-program-hero .lc-callback--inner-bottom > div {
        flex: none;
        min-width: 0;
    }

    .health-program-hero .lc-callback .form-item.checkbox-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .health-program-hero .lc-callback .form-item.checkbox-item .lc-typography--p4 {
        font-size: 12px;
        line-height: 18px;
    }
}

/* Narrow desktops / landscape tablets: stack the form so the inputs keep a usable width */
@media (min-width: 1025px) and (max-width: 1279px) {
    .health-program-hero .lc-callback--inner {
        grid-template-columns: 1fr;
    }

    .health-program-hero .lc-callback--inner-top > .content,
    .health-program-hero .lc-callback--inner-top > .form--actions,
    .health-program-hero .lc-callback--inner-bottom {
        grid-column: 1;
        grid-row: auto;
    }

    .health-program-hero .lc-callback--inner-top .content--title br {
        display: none;
    }
}

@media (max-width: 1024px) {
    .inner-section.health-program-hero {
        --hp-gap: 12px;
        --hp-radius: 24px;
        overflow: hidden;
    }
}

/* Uyku Sağlığı hero: photo is shown as-is, headline follows the design */
.health-program-hero.uyku-hero > .inner-bg {
    mix-blend-mode: normal;
}

.health-program-hero.uyku-hero .inner-slider--content {
    max-width: 760px;
}

/* One fluid base size ("ile"); the other parts scale from it in em.
   375px → 24px, 1440px → 50.4px (+5%), 1920px → 52.8px (+10%), slower growth above 1440px */
.health-program-hero.uyku-hero .inner-slider--content h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, min(14.7px + 2.479vw, 43.2px + 0.5vw), 56px);
    font-weight: 300;
    line-height: 1.1;
}

.health-program-hero.uyku-hero .inner-slider--content h1 b {
    font-size: min(1.667em, 9.3vw); /* 80 / 48; vw cap keeps "UYKU SAĞLIĞI" on one line on phones */
    font-weight: 700;
    text-transform: uppercase;
}

.health-program-hero.uyku-hero .inner-slider--content h1 span {
    display: block;
    margin-top: 0.15em;
    font-size: 1.083em; /* 52 / 48 */
    line-height: 1.25;
}

.health-program-hero.uyku-hero .inner-slider--content h1 em {
    font-style: normal;
}

.health-program-hero.uyku-hero .life-club-button {
    background-color: #25215f;
    border-color: #25215f;
}

.health-program-hero.uyku-hero .lc-callback--inner-top .content--title .lc-typography--h4,
.health-program-hero.uyku-hero .lc-callback .form-item.checkbox-item .lc-typography--p4 a {
    color: #25215f;
}

.health-program-hero.uyku-hero .lc-callback .form-item.checkbox-item .lc-typography--p4 a {
    text-decoration: underline;
}


/* ------------------------------------------------------------------
   Banner-style hero (Psikolog / Diyetisyen): same rounded card and equal gaps
------------------------------------------------------------------- */
body:has(.health-program-contact-bar) .banner-xl {
    --hp-gap: clamp(12px, 1.25vw, 24px);
    --hp-gutter: max(0px, calc(var(--hp-gap) + 32px - (100vw - min(100vw, var(--container-width))) / 2));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: var(--hp-gap);
    border-radius: 32px;
    overflow: hidden;
    min-height: 320px;
}

body:has(.health-program-contact-bar) .banner-xl .banner-section {
    inset: 0;
    height: 100%;
    margin-top: 0;
}

body:has(.health-program-contact-bar) .banner-xl .department-head {
    margin: 0;
    padding: 0 0 clamp(32px, 8svh, 96px);
}

body:has(.health-program-contact-bar) .banner-xl .department-head .container {
    padding-inline: var(--hp-gutter);
}

@media (min-width: 1025px) {
    body:has(.health-program-contact-bar) .banner-xl {
        height: calc(100svh - 88px - 2 * var(--hp-gap));
        min-height: 480px;
    }
}

@media (max-width: 1024px) {
    body:has(.health-program-contact-bar) .banner-xl {
        --hp-gap: 12px;
        border-radius: 24px;
        min-height: 360px;
    }

    body:has(.health-program-contact-bar) .banner-xl .department-head {
        padding-top: 48px; /* clears the logo that overlaps the card */
        padding-bottom: 32px;
    }

    body:has(.health-program-contact-bar) .banner-xl .department-head .container {
        padding-inline: 20px;
    }
}

/* ------------------------------------------------------------------
   Mobile / tablet: the hero card fills the first screen minus header, page gaps and the fixed
   bottom contact bar; the callback form sits below the banner in normal flow.
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .inner-section.health-program-hero,
    body:has(.health-program-contact-bar) .banner-xl {
        --hp-header-h: 80px;
        --hp-sticky-h: calc(64px + env(safe-area-inset-bottom, 0px)); /* .health-program-contact-bar */
        --hp-first-screen: calc(100svh - var(--hp-header-h) - 2 * var(--hp-gap) - var(--hp-sticky-h));
    }

    .inner-section.health-program-hero {
        overflow: visible;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        background: transparent;
    }

    /* banner = rounded card with the exact first-screen height */
    .inner-section.health-program-hero > .inner-bg {
        height: max(var(--hp-first-screen), 420px);
    }

    .inner-section.health-program-hero > .inner-slider {
        flex: none;
        height: max(var(--hp-first-screen), 420px);
        padding-bottom: 0;
    }

    /* extra 20px above the hero title (base mobile margin is 24px) */
    .inner-section.health-program-hero .inner-slider--content.mt-small {
        margin-top: 44px;
    }

    /* form below the banner, in flow, on the white page background */
    .inner-section.health-program-hero > .inner-section--bottom:has(form) {
        position: relative;
        inset: auto;
        transform: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .health-program-hero .inner-section--bottom > .container {
        padding-inline: 0;
    }

    .health-program-hero .lc-callback {
        padding: var(--hp-gap) 0 24px;
    }

    .health-program-hero .lc-callback--inner {
        box-shadow: 0 8px 28px rgba(37, 33, 95, .10);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Psikolog / Diyetisyen: banner = first screen; title sits at the banner's bottom, the BMI form flows below it */
    body:has(.health-program-contact-bar) .banner-xl {
        --hp-banner-h: max(var(--hp-first-screen), 360px);
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        border-radius: 0;
    }

    body:has(.health-program-contact-bar) .banner-xl .banner-section {
        height: var(--hp-banner-h);
        border-radius: 24px;
        overflow: hidden;
    }

    body:has(.health-program-contact-bar) .banner-xl .department-head {
        padding: calc(var(--hp-banner-h) + var(--hp-gap)) 0 24px;
    }

    body:has(.health-program-contact-bar) .banner-xl .department-head .container {
        position: relative;
        padding-inline: var(--hp-gap);
    }

    body:has(.health-program-contact-bar) .banner-xl .department-head h1 {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: calc(100% + var(--hp-gap) + 32px);
        margin: 0;
    }

    body:has(.health-program-contact-bar) .banner-xl .bmi-form {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
   Space between the hero + short form and the FIRST component, identical on every page that uses the hero
   (all /saglik-programlari/* pages and the lp-* landing pages).

   It used to differ per page: the legacy `.inner-section.form-page + section { padding-top: 180px }` rule
   (all.min.css) hit pages whose first component is a <section>, while pages whose first component is a <div>
   (genetik: 150px, longevity: 210px) used their own hand-tuned padding. Now one rule decides it.

   Desktop: the form card overlaps the banner, so the next block starts ~6px below the card;
   74px + 6px = 80px between the card and the first content.
   Mobile / tablet: the form sits in flow with 24px of padding under it; 16px + 24px = 40px.
   (The standard program pages override this with the page rhythm below.)
------------------------------------------------------------------- */
body .inner-section.health-program-hero + :is(section, div, article) {
    padding-top: 74px;
}

@media (max-width: 1024px) {
    body .inner-section.health-program-hero + :is(section, div, article) {
        padding-top: 16px;
    }
}

/* ------------------------------------------------------------------
   Vertical rhythm of the standard /saglik-programlari pages (premium, kalp sagligi, mikrobiyota: the pages
   built from the platinum-* components): one set of rules for every component. The landing pages
   (genetik, uyku, longevity) have their own section styles and are left as they were.

   --hp-section-gap : white space between two components (96px desktop / 72px tablet / 56px phone)
   --hp-title-gap   : space between a component's heading and its content (56px desktop / 32px tablet + phone)

   Every component starts with exactly one section gap above its content and has no bottom padding of
   its own, so the distance between two components is always one gap (it used to vary from 56px to 296px
   because each component carried its own hand-tuned top and bottom padding). Coloured blocks keep the same
   gap inside them (check-up band) and the form keeps it below, above the grey footer block.

   Hero -> first component: the hero already leaves some space under the short form (desktop: the form
   card overlaps the banner and the hero keeps --hp-gap below it; mobile / tablet: the form sits in flow
   with 24px under it), so that part is subtracted. This applies to every page that uses the hero
   (all /saglik-programlari/* pages and the lp-* landing pages), as the old single rule did.
------------------------------------------------------------------- */
body:has(.health-program-hero):has(.platinum-benefits) {
    --hp-section-gap: 96px;
    --hp-title-gap: 56px;
}

body:has(.health-program-hero):has(.platinum-benefits) .health-program-hero + * {
    --hp-first-gap: calc(var(--hp-section-gap) - clamp(12px, 1.25vw, 24px));
}

body:has(.health-program-hero):has(.platinum-benefits) .health-program-hero ~ :is(
    .healthy-life,
    .platinum-introduction,
    .platinum-benefits,
    .link-cart,
    .our-doctors,
    .checkup-section,
    .lc-accordion-component,
    .health-memberships,
    .lc-form
) {
    padding-top: var(--hp-first-gap, var(--hp-section-gap));
    padding-bottom: 0;
}

/* The form is a tinted block (light-grey top half, darker bottom half, the white form card sits across the
   middle). The white gap above it and the tinted strip above the form card each take half of the gap, so
   the cards before it are never glued to the grey edge and their shadow has room to fade out. */
body:has(.health-program-hero):has(.platinum-benefits) .health-program-hero ~ .lc-form {
    margin-top: calc(var(--hp-section-gap) / 2);
    padding-top: calc(var(--hp-section-gap) / 2);
    padding-bottom: var(--hp-section-gap);
}

body:has(.health-program-hero):has(.platinum-benefits) .checkup-section .checkup {
    padding-block: var(--hp-section-gap);
}

/* heading -> content */
body:has(.health-program-hero):has(.platinum-benefits) .platinum-benefits .platinum-benefits-top {
    margin-bottom: var(--hp-title-gap);
}

body:has(.health-program-hero):has(.platinum-benefits) .health-memberships .health-memberships--top-title {
    margin-bottom: 0;
}

body:has(.health-program-hero):has(.platinum-benefits) .health-memberships .register-slider-wrapper {
    padding-top: var(--hp-title-gap);
    padding-bottom: 0;
    overflow-x: clip;
    overflow-y: visible;
}

body:has(.health-program-hero):has(.platinum-benefits) .lc-accordion-component .lc-accordion-component--list {
    margin-top: calc(var(--hp-title-gap) - 20px);
}

/* program cards: one soft shadow instead of the long diagonal stack that ran into the next block */
body:has(.health-program-hero):has(.platinum-benefits) .health-memberships .lc-premium-membership-cart--item {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .08);
}

@media (max-width: 1024px) {
    body:has(.health-program-hero):has(.platinum-benefits) {
        --hp-section-gap: 72px;
        --hp-title-gap: 32px;
    }

    body:has(.health-program-hero):has(.platinum-benefits) .health-memberships {
        overflow-x: clip;
        overflow-y: visible;
    }

    body:has(.health-program-hero):has(.platinum-benefits) .health-program-hero + * {
        --hp-first-gap: calc(var(--hp-section-gap) - 24px);
    }
}

@media (max-width: 767px) {
    body:has(.health-program-hero):has(.platinum-benefits) {
        --hp-section-gap: 56px;
    }
}

/* intro block (text + round photo): on tablet / phone the photo stacks above the text with the heading gap */
@media (max-width: 1024px) {
    body:has(.health-program-hero):has(.platinum-benefits) .platinum-introduction .platinum-introduction-inner {
        gap: var(--hp-title-gap);
    }
}

/* the photo is shrunk with transform: scale(.8), which keeps the full unscaled box (394px) in the layout
   and leaves (394 - 315) / 2 = ~39px of invisible space above and below it; take that space back */
@media (max-width: 575px) {
    body:has(.health-program-hero):has(.platinum-benefits) .platinum-introduction .inner-image {
        margin-block: -39px;
    }
}

/* ------------------------------------------------------------------
   "Sağlık Programları" cards slider (.health-memberships), mobile / tablet.
   The slider script shows 1.3 / 2 cards and puts 30px between slides, but the card was a fixed 260px
   inside a wider slide, so the real gap grew to 40-140px, and the card had a fixed 469px height with
   dead space above the button. Now the card fills its slide (minus 14px, so 16px is visible between
   cards), grows with its content and everything sits on an 8px rhythm.
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .health-memberships .health-memberships--top {
        gap: 12px;
    }

    .health-memberships .health-memberships--top-title .lc-typography--span-icon {
        margin-bottom: 12px;
    }

    .health-memberships .health-memberships--top-title .lc-typography--h1 {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.01em;
    }

    .health-memberships .health-memberships--top-description p {
        font-size: 17px;
        line-height: 26px;
    }

    .health-memberships .register-slider .swiper-slide {
        display: flex;
        height: auto;
    }

    .health-memberships .lc-premium-membership-cart--item {
        flex: 0 0 calc(100% + 14px);
        width: auto;
        height: auto;
        border-radius: 20px;
    }

    .health-memberships .lc-premium-membership-cart--item-image {
        aspect-ratio: 2 / 1;
        min-height: 0;
        max-height: none;
        border-radius: 20px 20px 0 0;
    }

    .health-memberships .lc-premium-membership-cart--item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* badge sits on the image corner instead of straddling the top edge (no headroom needed above the cards) */
    .health-memberships .lc-premium-membership-cart--item .lc-premium-membership-cart--item-span {
        top: 12px;
        left: 12px;
    }

    .health-memberships .lc-premium-membership-cart--item .lc-premium-membership-cart--item-span ~ .lc-premium-membership-cart--item-span {
        top: 48px;
    }

    .health-memberships .lc-premium-membership-cart--item--content {
        flex: 1 1 auto;
        height: auto;
        justify-content: flex-start;
        gap: 20px;
        padding: 20px;
    }

    .health-memberships .lc-premium-membership-cart--item-description {
        flex: 1 1 auto;
    }

    .health-memberships .lc-premium-membership-cart--item-description .lc-typography--p2 {
        margin-top: 0;
        height: auto;
        max-height: none;
        -webkit-line-clamp: 10;
        line-clamp: 10;
        font-size: 15px;
        line-height: 22px;
        color: #6e6e73;
    }

    .health-memberships .lc-premium-membership-cart--item .button-wrapper {
        gap: 0;
    }

    .health-memberships .lc-premium-membership-cart--item-store {
        height: 48px;
        padding: 0 16px;
        font-size: 15px;
        line-height: 20px;
        font-weight: 500;
    }
}

/* ------------------------------------------------------------------
   "Ayrıcalıkları" slider (.platinum-benefits), mobile / tablet.
   Cards had a fixed height with a scroll box inside the list, the dark band was a fixed 285-406px tall
   and the arrows sat 4px under the cards. Now the cards are all as tall as the tallest one (no scroll
   box), the dark band is a background of the slider wrapper that starts at a fixed distance from the top
   of the cards, and the controls are an iOS-style pair of frosted round buttons with chevrons, centred
   under the cards. The "previous" button is dimmed (not hidden) on the first slide, so nothing jumps.
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .platinum-benefits .platinum-benefits-slider-wrapper {
        --pb-shelf-top: 240px;
        position: relative;
        z-index: 0;
        background: linear-gradient(to bottom, transparent var(--pb-shelf-top), var(--primary-color-900, #125853) var(--pb-shelf-top));
    }

    .platinum-benefits .platinum-benefits-slider-wrapper::before {
        content: "";
        position: absolute;
        inset: var(--pb-shelf-top) 0 0;
        z-index: -1;
        background: url("../../assets/images/globals/bubbles-variant-1.png") center center no-repeat;
        mix-blend-mode: soft-light;
    }

    .platinum-benefits .platinum-benefits-slider .swiper-wrapper {
        align-items: stretch;
    }

    .platinum-benefits .platinum-benefits-top--title p {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.01em;
    }

    .platinum-benefits .platinum-benefits-slider-item {
        height: auto;
        border-radius: 20px;
        box-shadow: 0 0 24px rgba(0, 0, 0, .06);
    }

    .platinum-benefits .platinum-benefits-slider-item .image {
        height: auto;
    }

    .platinum-benefits .platinum-benefits-slider-item .image img {
        display: block;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .platinum-benefits .platinum-benefits-slider-item .content {
        flex: 1 1 auto;
        padding: 20px 20px 24px;
        overflow: visible;
    }

    .platinum-benefits .platinum-benefits-slider-item .content > p {
        margin-bottom: 16px;
        font-size: 22px;
        line-height: 28px;
    }

    .platinum-benefits .platinum-benefits-slider-item .content ul {
        max-height: none;
        overflow: visible;
        gap: 10px;
    }

    .platinum-benefits .platinum-benefits-slider-item .content ul li {
        gap: 10px;
    }

    .platinum-benefits .platinum-benefits-slider-item .content ul li::before {
        margin-top: 5px;
    }

    .platinum-benefits .platinum-benefits-slider-item .content ul li p {
        font-size: 14px;
        line-height: 20px;
    }

    /* the dark shelf is drawn by the wrapper now; this block only holds the arrows */
    .platinum-benefits.premium-space .platinum-benefits-slider-wrapper .platinum-benefits-bottom {
        height: auto;
        align-items: flex-start;
        margin-top: 0;
        padding: 28px 0 24px;
        background: transparent;
    }

    .platinum-benefits .platinum-benefits-bottom::before {
        display: none;
    }

    /* controls: arrows on one centred row, then (on pages that have it) the text and the CTA button */
    .platinum-benefits .platinum-benefits-bottom > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 16px;
    }

    .platinum-benefits .platinum-benefits-slider-nav {
        display: contents;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev {
        order: 1;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next {
        order: 2;
    }

    .platinum-benefits .platinum-benefits-bottom-text {
        order: 3;
        flex: 0 0 100%;
        margin-top: 32px;
    }

    .platinum-benefits .platinum-benefits-bottom-text p {
        line-height: 24px;
    }

    .platinum-benefits .platinum-benefits-slider-nav .life-club-button {
        order: 4;
        flex: 0 0 100%;
        max-width: 400px;
        height: 52px;
        justify-content: center;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next {
        width: 44px;
        height: 44px;
        padding: 0;
        background: rgba(250, 250, 250, .16);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: opacity .2s ease, background-color .2s ease, transform .15s ease;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev:hover,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next:hover {
        opacity: 1;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev:active,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next:active {
        background: rgba(250, 250, 250, .3);
        transform: scale(.94);
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev:focus-visible,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* at the start / end of the slider the button stays, dimmed, instead of vanishing */
    .platinum-benefits .platinum-benefits-slider-nav .swiper-button-disabled {
        opacity: .32;
        cursor: default;
        pointer-events: none;
    }

    /* the icon is an arrow with a shaft: hide the shaft, keep the head as a chevron, centre it in the circle */
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev svg,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next svg {
        width: 44px;
        height: 44px;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev svg path:first-child,
    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next svg path:first-child {
        display: none;
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-prev svg {
        transform: translateX(9px);
    }

    .platinum-benefits .platinum-benefits-slider-nav .lc-swiper-button-next svg {
        transform: translateX(-9px);
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    .platinum-benefits .platinum-benefits-slider-wrapper {
        --pb-shelf-top: 300px;
    }
}

/* A line break that only exists on phones: <br class="br-mobile"> in the markup (hidden from 768px up, where the
   text sits on one line next to its button). */
br.br-mobile {
    display: none;
}

@media (max-width: 767px) {
    br.br-mobile {
        display: inline;
    }
}