@font-face {
    font-family: 'RobotoLight';
    src: local('Roboto Light'), local('Roboto-Light'),
         url('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/roboto/Roboto%5Bwdth%2Cwght%5D.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoRegular';
    src: local('Roboto Regular'), local('Roboto-Regular'),
         url('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/roboto/Roboto%5Bwdth%2Cwght%5D.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMedium';
    src: local('Roboto Medium'), local('Roboto-Medium'),
         url('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/roboto/Roboto%5Bwdth%2Cwght%5D.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoSemiBold';
    src: local('Roboto SemiBold'), local('Roboto-SemiBold'),
         url('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/roboto/Roboto%5Bwdth%2Cwght%5D.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ULFIT promo popup. Desktop geometry follows the supplied Figma popup 1260x600. */
.cosmo-promo,
.cosmo-promo *,
.cosmo-promo *::before,
.cosmo-promo *::after {
    box-sizing: border-box;
}

.cosmo-promo {
    font-synthesis: none;
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    font-family: 'RobotoRegular', Arial, sans-serif;
}

.cosmo-promo.is-open { display: flex; }

.cosmo-promo__backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    background: rgba(47, 51, 55, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.cosmo-promo__dialog {
    position: relative;
    z-index: 1;
    display: block;
    width: 1260px;
    max-width: calc(100vw - 48px);
    height: 600px;
    max-height: calc(100vh - 48px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #DCEFEB;
    box-shadow: none;
    animation: cosmoPromoOpen .28s ease-out both;
}

@keyframes cosmoPromoOpen {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cosmo-promo__visual {
    position: absolute;
    left: 0;
    top: 0;
    width: 630px;
    height: 600px;
    margin: 0;
    overflow: hidden;
    background: #DCEFEB;
}

.cosmo-promo__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cosmo-promo-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.cosmo-promo__close {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    position: absolute;
    left: 1200px;
    top: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 300px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    cursor: pointer;
}

.cosmo-promo__close span {
    position: absolute;
    left: 14px;
    top: 19px;
    width: 12px;
    height: 0;
    margin: 0;
    border-top: 2px solid #528892;
    transform-origin: center;
}
.cosmo-promo__close span:first-child { transform: rotate(45deg); }
.cosmo-promo__close span:last-child { transform: rotate(-45deg); }

.cosmo-promo__content {
    position: absolute;
    left: 660px;
    top: 50%;
    display: grid;
    grid-template-rows: 172px 51px 224px;
    align-items: start;
    width: 501px;
    height: 511px;
    margin: 0;
    padding: 0;
    row-gap: 32px;
    transform: translateY(-50%);
}

.cosmo-promo__heading {
    display: grid;
    grid-template-rows: 100px 64px;
    width: 511px;
    height: 172px;
    margin: 0;
    padding: 0;
    row-gap: 8px;
}

.cosmo-promo .cosmo-promo__title {
    display: block;
    flex: 0 0 100px;
    width: 511px;
    height: 100px;
    margin: 0 !important;
    padding: 0 !important;
    color: #375557 !important;
    font-family: 'RobotoLight', Arial, sans-serif !important;
    font-size: 48px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 104% !important;
    letter-spacing: -.01em !important;
    text-align: left !important;
    text-transform: none !important;
}

.cosmo-promo .cosmo-promo__description {
    display: block;
    flex: 0 0 64px;
    width: 451px;
    height: 64px;
    margin: 0 !important;
    padding: 0 !important;
    color: #000000 !important;
    font-family: 'RobotoLight', Arial, sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 160% !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
}

.cosmo-promo__timer {
    display: flex;
    flex: 0 0 51px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 427px;
    height: 51px;
    margin: 0;
    padding: 12px;
    gap: 8px;
    border: 0;
    border-radius: 4px;
    background: #C3E3D7;
}

.cosmo-promo__timer-label {
    display: flex;
    flex: 0 0 218px;
    flex-direction: row;
    align-items: center;
    width: 218px;
    height: 16px;
    margin: 0 auto 0 0;
    padding: 0;
    gap: 8px;
    color: #000000;
    font-family: 'RobotoRegular', Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 136%;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cosmo-promo__clock {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.cosmo-promo__countdown {
    display: flex;
    flex: 0 0 124px;
    flex-direction: row;
    align-items: center;
    width: 124px;
    height: 27px;
    margin: 0 0 0 auto;
    padding: 0;
    gap: 8px;
}

.cosmo-promo__unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 27px;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.cosmo-promo__digit {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 27px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #000000;
    font-family: 'RobotoMedium', Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 136%;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.cosmo-promo__unit small {
    display: block;
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: 'RobotoRegular', Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 136%;
    letter-spacing: .02em;
}

.cosmo-promo__digit {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.cosmo-promo__digit-cell {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 27px;
    overflow: hidden;
}

.cosmo-promo__digit-track {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 54px;
    transform: translate3d(0, 0, 0);
    transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.cosmo-promo__digit-track.is-rolling {
    transform: translate3d(0, -27px, 0);
}

.cosmo-promo__digit-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 27px;
    margin: 0;
    padding: 0;
    line-height: 27px;
    opacity: 1;
    transform: scale(1);
    transition: opacity 520ms ease, transform 680ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    backface-visibility: hidden;
}

.cosmo-promo__digit-face--new {
    opacity: .28;
    transform: scale(.94);
}

.cosmo-promo__digit-track.is-rolling .cosmo-promo__digit-face--old {
    opacity: .18;
    transform: scale(.94);
}

.cosmo-promo__digit-track.is-rolling .cosmo-promo__digit-face--new {
    opacity: 1;
    transform: scale(1);
}

.cosmo-promo__fields {
    display: grid;
    grid-template-rows: 54px 54px;
    width: 427px;
    height: 116px;
    margin: 0;
    padding: 0;
    row-gap: 8px;
}

/* Field appearance is copied from the existing Venediktova case popup. */
.cosmo-promo__field {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 427px;
    height: 54px;
    margin: 0;
    padding: 5px 12px 8px;
    background: #FFFFFF;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    transition: box-shadow .22s ease;
}

.cosmo-promo__field > span {
    position: static;
    display: block;
    flex: 0 0 13px;
    height: 13px;
    margin: 0 0 1px 4.55px;
    padding: 0;
    color: #484848;
    background: transparent;
    font-family: 'RobotoRegular', Arial, sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: .02em;
    pointer-events: none;
    transition: color .22s ease;
}

.cosmo-promo__field input {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    flex: 0 0 27px;
    width: 100%;
    height: 27px;
    min-height: 27px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    color: rgba(0, 0, 0, .6);
    background: transparent;
    box-shadow: none;
    font-family: 'RobotoRegular', Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: .02em;
    caret-color: #528892;
}

.cosmo-promo__field input::placeholder {
    color: rgba(0, 0, 0, .6);
    opacity: 1;
    transition: color .22s ease;
}

.cosmo-promo__field:focus-within {
    box-shadow: inset 0 0 0 1px rgba(82, 136, 146, .45);
}

.cosmo-promo__field:focus-within input {
    color: #000000;
}

.cosmo-promo__field:focus-within input::placeholder {
    color: rgba(0, 0, 0, .78);
}

.cosmo-promo__field:focus-within > span {
    color: #528892;
}

.cosmo-promo__field.has-error {
    box-shadow: inset 0 0 0 1px #B94A48;
}

/* Error animation copied from the existing Protect/Onco popup fields. */
.cosmo-promo__field-error {
    position: absolute;
    left: 12px;
    bottom: 0;
    z-index: 20;
    display: block;
    margin: 0;
    padding: 0;
    color: #FF0000;
    background: transparent;
    font-family: 'RobotoMedium', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: .5s;
}

.cosmo-promo__field.has-error .cosmo-promo__field-error {
    opacity: 1;
    transform: translateY(95%);
}

.cosmo-promo__actions {
    display: grid;
    grid-template-rows: 54px 22px;
    width: 427px;
    height: 88px;
    margin: 0;
    padding: 0;
    row-gap: 12px;
}

.cosmo-promo__submit {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 54px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 427px;
    height: 54px;
    min-height: 54px;
    margin: 20px 0 0;
    padding: 12px 32px;
    gap: 10px;
    border: 1px solid #528892;
    border-radius: 0;
    color: #FFFFFF;
    background: #528892;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
@media (hover: hover) {
    .cosmo-promo__submit:hover {
        background: #487880;
        border-color: #487880;
    }

    .cosmo-promo__submit:hover .cosmo-promo__submit-arrow {
        transform: translateX(4px);
    }
}

.cosmo-promo__submit:focus-visible {
    background: #487880;
    border-color: #487880;
}

.cosmo-promo__submit:focus-visible .cosmo-promo__submit-arrow {
    transform: translateX(4px);
}

.cosmo-promo__submit:active {
    background: #476B7A;
    border-color: #476B7A;
}

.cosmo-promo__submit:disabled { cursor: default; opacity: .58; }

.cosmo-promo__submit-text {
    display: block;
    width: 96px;
    height: 19px;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: 'RobotoSemiBold', Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 148%;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cosmo-promo__submit-arrow {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 21px;
    margin: 0;
    padding: 0;
    transform: translateX(0);
    transition: transform .25s ease;
}
.cosmo-promo__submit-arrow img { display:block; width:11px; height:10px; max-width:none; margin:0; padding:0; }

/* Consent copy from the Figma layout: no checkbox. */
.cosmo-promo__policy {
    display: block;
    flex: 0 0 22px;
    width: 427px;
    max-width: 427px;
    height: 22px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #393939 !important;
    font-family: 'RobotoRegular', Arial, sans-serif !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 136% !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    white-space: nowrap;
}
.cosmo-promo__policy a {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 1px;
}

/* Regenera Pro promo: readable consent copy; no changes to other campaigns. */
.cosmo-promo[data-campaign="regenera-pro"] .cosmo-promo__actions {
    grid-template-rows: 54px auto;
    height: auto;
}
.cosmo-promo[data-campaign="regenera-pro"] .cosmo-promo__policy {
    height: auto;
    min-height: 34px;
    white-space: normal;
    font-family: 'RobotoRegular', Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
.cosmo-promo[data-campaign="regenera-pro"] .cosmo-promo__policy a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* Ultraformer promo: 12px desktop / 10px mobile consent; keep the other campaigns unchanged. */
.cosmo-promo[data-campaign="ultraformer"] .cosmo-promo__actions {
    grid-template-rows: 54px auto;
    height: auto;
}
.cosmo-promo[data-campaign="ultraformer"] .cosmo-promo__policy {
    height: auto;
    min-height: 34px;
    white-space: normal;
    font-family: 'RobotoRegular', Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
.cosmo-promo[data-campaign="ultraformer"] .cosmo-promo__policy a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* Longevity / weight-loss campaign: readable consent, scoped to this popup. */
.cosmo-promo[data-campaign="longevity"] .cosmo-promo__actions {
    grid-template-rows: 54px auto;
    height: auto;
}
.cosmo-promo[data-campaign="longevity"] .cosmo-promo__policy {
    height: auto;
    min-height: 34px;
    white-space: normal;
    font-family: 'RobotoRegular', Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
.cosmo-promo[data-campaign="longevity"] .cosmo-promo__policy a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.cosmo-promo__form-message {
    position:absolute;
    left:0;
    top:calc(100% + 7px);
    display:block;
    width:427px;
    margin:0;
    padding:0;
    font-family:'RobotoRegular', Arial, sans-serif;
    font-size:11px;
    line-height:1.3;
    opacity:0;
    transform:translateY(-4px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}
.cosmo-promo__form-message.is-error,
.cosmo-promo__form-message.is-success { opacity:1; transform:translateY(0); }
.cosmo-promo__form-message.is-error { color:#9D2828; }
.cosmo-promo__form-message.is-success { color:#315F53; }

.cosmo-promo__honeypot {
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}
html.cosmo-promo-lock,
body.cosmo-promo-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}


@media (min-width: 901px) {
    .cosmo-promo__unit small {
        margin-top: 5px;
    }
}

@media (max-width: 1320px) and (min-width: 901px) {
    .cosmo-promo__dialog {
        transform-origin: center center;
    }
}

/* Mobile layout from the supplied mobile Figma frame: popup 375x872, image 375x300, content 335px. */
@media (max-width: 900px) {
    .cosmo-promo__unit small {
        margin-top: 5px;
    }

    .cosmo-promo {
        align-items:center;
        justify-content:center;
        padding:0;
        overflow:hidden;
        overscroll-behavior:none;
    }
    .cosmo-promo__dialog {
        width:375px;
        max-width:none;
        height:872px;
        max-height:none;
        min-height:872px;
        margin:0;
        border-radius:20px;
        animation:none;
        transform:scale(var(--cosmo-mobile-scale, 1));
        transform-origin:center center;
    }
    .cosmo-promo__visual { left:0; top:0; width:375px; max-width:100%; height:300px; }
    .cosmo-promo__visual::after { width:102%; background-position:center center; background-size:cover; }
    .cosmo-promo__close { left:auto; right:20px; top:20px; }
    .cosmo-promo__content {
        left:20px;
        top:323px;
        grid-template-rows:170px 75px 224px;
        width:335px;
        height:517px;
        row-gap:24px;
        transform:none;
    }
    .cosmo-promo__heading { grid-template-rows:66px 96px; width:335px; height:170px; row-gap:8px; }
    .cosmo-promo .cosmo-promo__title {
        flex-basis:66px;
        width:335px;
        height:66px;
        font-size:32px !important;
        line-height:104% !important;
    }
    .cosmo-promo .cosmo-promo__description {
        flex-basis:96px;
        width:335px;
        height:96px;
        font-size:20px !important;
        line-height:160% !important;
    }
    .cosmo-promo__timer {
        flex-basis:75px;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        width:335px;
        height:75px;
        padding:12px;
        gap:8px;
    }
    .cosmo-promo__timer-label { flex-basis:16px; width:218px; height:16px; margin:0; }
    .cosmo-promo__countdown { flex-basis:27px; width:124px; height:27px; margin:0; }
    .cosmo-promo__form { grid-template-rows:116px 88px; width:335px; height:224px; row-gap:20px; }
    .cosmo-promo__fields { width:335px; }
    .cosmo-promo__field { width:335px; }
    .cosmo-promo__field > span { margin-left:.98px; }
    /* 16px prevents Safari from auto-zooming the page when a field receives focus. */
    .cosmo-promo__field input { font-size:16px; }
    .cosmo-promo__actions { width:335px; }
    .cosmo-promo__submit { width:335px; }
    .cosmo-promo__policy { width:335px; max-width:335px; height:22px; white-space:normal; }
    /* Longevity consent text on mobile. */
    .cosmo-promo[data-campaign="longevity"] .cosmo-promo__policy {
        height: auto;
        min-height: 28px;
        font-size: 10px !important;
    }
    /* Ultraformer consent text on mobile. */
    .cosmo-promo[data-campaign="ultraformer"] .cosmo-promo__policy {
        height: auto;
        min-height: 28px;
        font-size: 10px !important;
    }
    /* Regenera Pro mobile-only consent typography. */
    .cosmo-promo[data-campaign="regenera-pro"] .cosmo-promo__policy {
        height: auto;
        min-height: 28px;
        font-size: 10px !important;
    }
    .cosmo-promo__form-message { width:335px; }
}

@media (max-width: 374px) {
    .cosmo-promo__dialog {
        width:375px;
        min-width:375px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cosmo-promo__dialog,
    .cosmo-promo__digit.is-changing,
    .cosmo-promo__field,
    .cosmo-promo__field input,
    .cosmo-promo__field-error,
    .cosmo-promo__submit-arrow { animation:none; transition:none; }
}

/* Popup countdown: exact odometer motion used by Special Offers. */
.cosmo-promo__digit-cell,
.cosmo-promo__digit-track,
.cosmo-promo__digit-face {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}