/* Ranx Social Fallback Ads */

.ranx-social-ad-slot,
.ranx-social-ad-slot * {
    box-sizing: border-box;
}

.ranx-social-ad-slot {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    line-height: 1.25;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ranx-social-ad-slot.sfa-format-display {
    width: 300px;
    height: 250px;
}

.ranx-social-ad-slot.sfa-format-display.index {
    width: 279px;
    height: 250px;
}

.ranx-social-ad-slot.sfa-format-skyscraper {
    width: 300px;
    height: 600px;
}

.ranx-social-ad-slot.sfa-format-skyscraper.index {
    width: 279px;
    height: 600px;
}

.ranx-social-ad-slot.sfa-format-responsive {
    width: 100%;
    aspect-ratio: 8 / 1;
    min-width: 0;
    container-type: inline-size;
}

.ranx-social-ad-adsense,
.ranx-social-fallback-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ranx-social-ad-adsense {
    z-index: 1;
}

.ranx-social-fallback-host {
    z-index: 2;
    display: none;
}

.ranx-social-ad-slot.sfa-is-unfilled .ranx-social-fallback-host,
.ranx-social-ad-slot.sfa-preview-slot .ranx-social-fallback-host {
    display: block;
}

.ranx-social-ad-slot.sfa-is-unfilled .ranx-social-ad-adsense {
    visibility: hidden;
    pointer-events: none;
}

.sfa-ad {
    --sfa-brand: #ee3d45;
    --sfa-brand-rgb: 238, 61, 69;
    --sfa-ink: #ffffff;
    --sfa-muted: rgba(255, 255, 255, 0.78);
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--sfa-ink);
    text-decoration: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--sfa-brand-rgb), 0.54), transparent 37%),
        radial-gradient(circle at 95% 100%, rgba(var(--sfa-brand-rgb), 0.28), transparent 40%),
        linear-gradient(145deg, #080b15 0%, #12182a 54%, #080a11 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.sfa-ad::before,
.sfa-ad::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.sfa-ad::before {
    width: 48%;
    aspect-ratio: 1;
    top: -26%;
    right: -18%;
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow:
        0 0 0 18px rgba(255, 255, 255, 0.025),
        0 0 0 36px rgba(255, 255, 255, 0.018);
}

.sfa-ad::after {
    width: 20%;
    aspect-ratio: 1;
    left: -8%;
    bottom: -10%;
    background: rgba(var(--sfa-brand-rgb), 0.18);
    filter: blur(1px);
}

.sfa-ad:hover,
.sfa-ad:focus-visible {
    text-decoration: none;
}

.sfa-ad:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -4px;
}

.sfa-ad:hover .sfa-cta {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.sfa-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
}

.sfa-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: var(--sfa-brand);
    box-shadow: 0 12px 30px rgba(var(--sfa-brand-rgb), 0.35);
}

.sfa-brand-mark svg {
    width: 70%;
    height: 70%;
    display: block;
    fill: currentColor;
    stroke: currentColor;
}

.sfa-network-pinterest .sfa-brand-mark svg {
    overflow: visible;
}

.sfa-eyebrow {
    color: rgba(255, 255, 255, 0.66);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sfa-title {
    display: block;
    margin: 0;
    color: #ffffff;
    font-weight: 780;
}

.sfa-title strong {
    color: #ffffff;

    font-weight: bolder;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.02;
}

.sfa-title-ranx {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: unset;
    font-weight: unset;
    color: unset;

}
.sfa-title-ranx span, .sfa-cta-text{
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: unset;
    font-weight: unset;
    color: unset;
}

.sfa-title-logo-r {
    display: inline-block;
    width: auto;
    height: 0.86em;
    margin-right: 0.015em;
    vertical-align: -0.055em;
}

.sfa-description {
    position: relative;
    display: block;
    float: none;
    clear: both;
    width: 100%;
    margin: 0;
    color: var(--sfa-muted);
    font-weight: 500;
}

.sfa-handle {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 750;
}

.sfa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42em;
    flex: 0 0 auto;
    color: #0a0c13;
    background: #ffffff;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.sfa-cta-arrow {
    font-size: 1.15em;
    line-height: 1;
}

.sfa-ranx-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 750;
}

.sfa-ranx-dot {
    width: 0.55em;
    height: 0.55em;
    border-radius: 999px;
    background: #ee3d45;
    box-shadow: 0 0 0 0.22em rgba(238, 61, 69, 0.16);
}

/* 300 x 250 */
.sfa-format-display .sfa-content {
    flex-direction: column;
    padding: 20px;
}

.sfa-format-display .sfa-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sfa-format-display .sfa-brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 12px;
}

.sfa-format-display .sfa-eyebrow {
    font-size: 9px;
}

.sfa-format-display .sfa-copy {
    margin-top: 16px;
}

.sfa-format-display .sfa-title {
    max-width: 245px;
    font-size: 27px;
    line-height: 1.02;
}

.sfa-format-display .sfa-description {
    margin-top: 8px;
    max-width: 240px;
    font-size: 10.5px;
    line-height: 1.42;
}

.sfa-format-display .sfa-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.sfa-format-display .sfa-handle {
    font-size: 11px;
}

.sfa-format-display .sfa-cta {
    min-height: 35px;
    padding: 0 14px;
    font-size: 11px;
}

.sfa-format-display .sfa-ranx-wordmark {
    display: none;
}

/* 300 x 600 */
.sfa-format-skyscraper .sfa-content {
    flex-direction: column;
    align-items: center;
    padding: 34px 26px 28px;
    text-align: center;
}

.sfa-format-skyscraper .sfa-top-row {
    display: contents;
}

.sfa-format-skyscraper .sfa-brand-mark {
    width: 92px;
    height: 92px;
    margin-top: 42px;
    border-radius: 20px;
}

.sfa-format-skyscraper .sfa-eyebrow {
    order: -1;
    font-size: 10px;
}

.sfa-format-skyscraper .sfa-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 31px;
}

.sfa-format-skyscraper .sfa-title {
    font-size: 35px;
    line-height: 1.05;
}

.sfa-format-skyscraper .sfa-network-x .sfa-title {
    font-size: 32px;
    white-space: nowrap;
}

.sfa-format-skyscraper .sfa-description {
    margin: 17px auto 0;
    max-width: 220px;
    font-size: 14px;
    line-height: 1.55;
}

.sfa-format-skyscraper .sfa-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.sfa-format-skyscraper .sfa-handle {
    margin-bottom: 14px;
    font-size: 13px;
}

.sfa-format-skyscraper .sfa-cta {
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    font-size: 13px;
}

.sfa-format-skyscraper .sfa-ranx-wordmark {
    margin-top: 22px;
    font-size: 11px;
}

/* Responsive 8:1 */
.sfa-format-responsive .sfa-content {
    flex-direction: row;
    align-items: center;
    gap: clamp(10px, 2.2cqw, 24px);
    padding: clamp(7px, 1.55cqw, 17px) clamp(10px, 2.5cqw, 27px);
}

.sfa-format-responsive .sfa-top-row {
    display: contents;
}

.sfa-format-responsive .sfa-brand-mark {
    width: clamp(30px, 7.5cqw, 72px);
    height: clamp(30px, 7.5cqw, 72px);
    border-radius: clamp(6px, 1.35cqw, 14px);
}

.sfa-format-responsive .sfa-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
}

.sfa-format-responsive .sfa-eyebrow {
    margin-bottom: 0.35em;
    font-size: clamp(6px, 1.08cqw, 11px);
}

.sfa-format-responsive .sfa-title {
    overflow: hidden;
    font-size: clamp(13px, 2.75cqw, 28px);
    line-height: 1.02;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sfa-format-responsive .sfa-description {
    margin-top: 0.45em;
    overflow: hidden;
    font-size: clamp(7px, 1.28cqw, 13px);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sfa-format-responsive .sfa-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.7cqw, 8px);
    flex: 0 0 auto;
}

.sfa-format-responsive .sfa-handle {
    font-size: clamp(7px, 1.15cqw, 12px);
}

.sfa-format-responsive .sfa-cta {
    min-height: clamp(25px, 4.6cqw, 44px);
    padding: 0 clamp(10px, 2.1cqw, 22px);
    font-size: clamp(8px, 1.25cqw, 13px);
}

.sfa-format-responsive .sfa-ranx-wordmark {
    display: none;
}

@container (max-width: 520px) {
    .sfa-format-responsive .sfa-description,
    .sfa-format-responsive .sfa-handle {
        display: none;
    }

    .sfa-format-responsive .sfa-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
}

@container (max-width: 380px) {
    .sfa-format-responsive .sfa-eyebrow {
        display: none;
    }

    .sfa-format-responsive .sfa-title {
        font-size: clamp(11px, 3.7cqw, 15px);
    }

    .sfa-format-responsive .sfa-cta-text {
        display: none;
    }

    .sfa-format-responsive .sfa-cta {
        width: clamp(25px, 9cqw, 34px);
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfa-cta {
        transition: none;
    }
}
