/*
 * RapidRank pricing label and footer-logo refinements.
 */

/* =========================================================
   PRICING PLAN LABELS
   ========================================================= */

/*
 * Apply the same rounded blue-gradient treatment used by the
 * Enterprise Evaluation badge to the other three plan headings.
 *
 * The first pricing card is excluded because it already has its
 * Enterprise Evaluation badge.
 */
.rr-pricing-grid > article:nth-child(n + 2) > h3,
.rr-pricing-grid > article:nth-child(n + 2) .rr-pricing-card__title,
.rr-pricing-grid > article:nth-child(n + 2) .rr-pricing-title {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--rr-space-5);
    padding: 0.52rem 0.95rem;
    border: 1px solid rgba(24, 189, 242, 0.52);
    border-radius: var(--rr-radius-pill);
    color: var(--rr-color-white);
    background: linear-gradient(
        135deg,
        var(--rr-color-blue-700),
        var(--rr-color-cyan-500)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 22px rgba(18, 63, 196, 0.16);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

/*
 * Additional selectors cover the current pricing markup if the
 * cards use generic article or card classes.
 */
.rr-pricing-cards > article:nth-child(n + 2) > h3,
.rr-pricing-card-grid > article:nth-child(n + 2) > h3,
.rr-pricing-plans > article:nth-child(n + 2) > h3 {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--rr-space-5);
    padding: 0.52rem 0.95rem;
    border: 1px solid rgba(24, 189, 242, 0.52);
    border-radius: var(--rr-radius-pill);
    color: var(--rr-color-white);
    background: linear-gradient(
        135deg,
        var(--rr-color-blue-700),
        var(--rr-color-cyan-500)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 22px rgba(18, 63, 196, 0.16);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}


/* =========================================================
   FOOTER LOGO
   ========================================================= */

.rr-brand--footer {
    width: 13.25rem;
    height: 5.25rem;
    display: grid;
    overflow: hidden;
    place-items: center;
    padding: 0;
    border-radius: 0.75rem;
    background: var(--rr-color-white);
}

.rr-brand--footer img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: scale(1.65);
    transform-origin: center;
}

/*
 * Prevent other global brand-image rules from shrinking the
 * footer logo.
 */
.rr-site-footer .rr-brand--footer img {
    max-width: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .rr-brand--footer {
        width: 11.5rem;
        height: 4.75rem;
    }

    .rr-brand--footer img {
        transform: scale(1.55);
    }
}