.floating-cta {
    --floating-cta-pill-red: #CD1518;
    --floating-cta-pill-w: 224px;
    --floating-cta-pill-h: 80px;
    --floating-cta-circle: 106px;
    --floating-cta-overlap: 31px;
    --floating-cta-ease: cubic-bezier(.22, .61, .36, 1);
    --floating-cta-duration: .45s;
    --floating-cta-scale: 1.38;

    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 30;

    display: block;
    width: var(--floating-cta-circle);
    height: var(--floating-cta-circle);

    text-decoration: none;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
}

.floating-cta:hover,
.floating-cta:focus-visible,
.floating-cta[aria-expanded="true"] {
    color: #ffffff;
    outline: none;
}

.floating-cta__pill-box {
    position: absolute;
    top: 50%;
    right: var(--floating-cta-overlap);
    width: var(--floating-cta-pill-w);
    height: var(--floating-cta-pill-h);
    transform: translateY(-50%);
    border-radius: 900px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

@media (hover: hover) {
    .floating-cta:hover .floating-cta__pill-box,
    .floating-cta:focus-visible .floating-cta__pill-box {
        pointer-events: auto;
    }
}

.floating-cta[aria-expanded="true"] .floating-cta__pill-box {
    pointer-events: auto;
}

.floating-cta__pill {
    width: 100%;
    height: 100%;
    padding: 20px 88px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    background: var(--floating-cta-pill-red);
    border-radius: 900px;
    font-family: 'Geologica', sans-serif;
    font-variation-settings: 'CRSV' 0, 'SHRP' 0;
    white-space: nowrap;
    box-sizing: border-box;

    transform: translateX(100%);
    transition: transform var(--floating-cta-duration) var(--floating-cta-ease);
    will-change: transform;
}

@media (hover: hover) {
    .floating-cta:hover .floating-cta__pill,
    .floating-cta:focus-visible .floating-cta__pill {
        transform: translateX(0);
    }
}

.floating-cta[aria-expanded="true"] .floating-cta__pill {
    transform: translateX(0);
}

.floating-cta__pill-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.26px;
    text-transform: uppercase;
    color: #ffffff;
}

.floating-cta__pill-subtitle {
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.22px;
    color: #ffffff;
    opacity: 0.6;
}

.floating-cta__circle {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--floating-cta-circle);
    height: var(--floating-cta-circle);
    overflow: visible;
    z-index: 2;
}

.floating-cta__svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 138.68%;
    height: 154.72%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.floating-cta__svg-scaled {
    transform-box: view-box;
    transform-origin: 94px 53px;
    transform: scale(1);
    transition: transform var(--floating-cta-duration) var(--floating-cta-ease);
    will-change: transform;
}

@media (hover: hover) {
    .floating-cta:hover .floating-cta__svg-scaled,
    .floating-cta:focus-visible .floating-cta__svg-scaled {
        transform: scale(var(--floating-cta-scale));
    }
}

.floating-cta[aria-expanded="true"] .floating-cta__svg-scaled {
    transform: scale(var(--floating-cta-scale));
}

@keyframes floatingCtaDotPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.35);
    }
}

.floating-cta.has-unread .floating-cta__dot {
    transform-box: view-box;
    transform-origin: 59.5px 15.5px;
    animation: floatingCtaDotPulse 1.2s ease-in-out infinite;
}

@media (max-width: 1024px) {
    .floating-cta {
        right: 16px;
        bottom: 80px;
        --floating-cta-circle: 84px;
        --floating-cta-pill-w: 200px;
        --floating-cta-pill-h: 72px;
        --floating-cta-overlap: 24px;
    }

    .floating-cta__pill {
        padding: 16px 76px 16px 20px;
    }

    .floating-cta__pill-title {
        font-size: 12px;
    }

    .floating-cta__pill-subtitle {
        font-size: 10px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .floating-cta__pill,
    .floating-cta__svg-scaled {
        transition: none;
    }
}