/* =========================================================
   RANKING
   ========================================================= */

.ranking {
    padding: 90px 0;
}


/* =========================================================
   HEADER
   ========================================================= */

.ranking__header {
    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}

.ranking__eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ranking__title {
    margin-bottom: 15px;

    font-size: clamp(30px, 4vw, 46px);

    letter-spacing: -0.03em;
}

.ranking__subtitle {
    margin: 0;

    color: var(--color-text-light);

    font-size: 16px;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.ranking__wrapper {
    width: 100%;
}


/* =========================================================
   DESKTOP TABLE
   ========================================================= */

.ranking__desktop {
    width: 100%;

    overflow-x: auto;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-large);

    background-color: var(--color-white);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.06);
}

.ranking__table {
    width: 100%;

    min-width: 760px;

    border-collapse: separate;
    border-spacing: 0;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.ranking__table thead th {
    position: relative;

    padding: 30px 20px;

    background-color: var(--color-background);

    border-bottom: 1px solid var(--color-border);

    text-align: center;

    vertical-align: middle;
}

.ranking__table thead th:first-child {
    text-align: left;
}

.ranking__feature-column {
    width: 25%;

    color: var(--color-text-light);

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* =========================================================
   COMPANY
   ========================================================= */

.ranking__company {
    width: 25%;

    border-left: 1px solid var(--color-border);
}

.ranking__company.is-highlighted {
    background-color: var(--color-primary-light);
}

.ranking__badge {
    display: inline-flex;

    margin-bottom: 12px;

    padding: 5px 10px;

    border-radius: 999px;

    background-color: var(--color-primary);

    color: var(--color-white);

    font-size: 11px;
    font-weight: 800;
}

.ranking__company-logo {
    display: flex;

    min-height: 50px;

    align-items: center;
    justify-content: center;
}

.ranking__company-logo img {
    display: block;

    max-width: 130px;
    max-height: 45px;

    width: auto;
    height: auto;
}

.ranking__company-logo span {
    color: var(--color-text);

    font-size: 18px;
    font-weight: 800;
}


/* =========================================================
   PRICE
   ========================================================= */

.ranking__price {
    display: flex;
    flex-direction: column;

    margin-top: 14px;

    align-items: center;
}

.ranking__price small {
    color: var(--color-text-light);

    font-size: 11px;
}

.ranking__price strong {
    color: var(--color-primary);

    font-size: 24px;
    line-height: 1.2;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

.ranking__table tbody td {
    padding: 18px 20px;

    border-bottom: 1px solid var(--color-border);

    text-align: center;

    vertical-align: middle;
}

.ranking__table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   FEATURE NAME
   ========================================================= */

.ranking__feature-name {
    color: var(--color-text);

    font-size: 14px;
    font-weight: 700;

    text-align: left !important;
}


/* =========================================================
   VALUE
   ========================================================= */

.ranking__value {
    border-left: 1px solid var(--color-border);

    color: var(--color-text-light);

    font-size: 14px;
    font-weight: 600;
}

.ranking__value.is-positive {
    color: var(--color-primary);

    font-weight: 800;
}


/* =========================================================
   CHECK
   ========================================================= */

.ranking__check {
    display: inline-flex;

    width: 25px;
    height: 25px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: var(--color-primary-light);

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.ranking__actions td {
    padding-top: 25px !important;
    padding-bottom: 25px !important;

    background-color: var(--color-background);
}

.ranking__button {
    width: 100%;

    justify-content: center;

    white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

.ranking__mobile {
    display: none;
}


/* =========================================================
   MOBILE CARDS
   ========================================================= */

.ranking-card {
    position: relative;

    padding: 24px;

    background-color: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-large);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06);
}

.ranking-card.is-highlighted {
    border-color: var(--color-primary);
}

.ranking-card + .ranking-card {
    margin-top: 20px;
}

.ranking-card__badge {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 5px 10px;

    border-radius: 999px;

    background-color: var(--color-primary);

    color: var(--color-white);

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

.ranking-card__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--color-border);
}

.ranking-card__logo img {
    display: block;

    max-width: 130px;
    max-height: 45px;
}

.ranking-card__logo span {
    font-size: 20px;
    font-weight: 800;
}

.ranking-card__price {
    display: flex;
    flex-direction: column;

    align-items: flex-end;
}

.ranking-card__price small {
    color: var(--color-text-light);

    font-size: 11px;
}

.ranking-card__price strong {
    color: var(--color-primary);

    font-size: 23px;
}


/* =========================================================
   MOBILE BENEFITS
   ========================================================= */

.ranking-card__benefits {
    padding: 8px 0 20px;
}

.ranking-card__benefit {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border);
}

.ranking-card__benefit:last-child {
    border-bottom: 0;
}

.ranking-card__benefit-name {
    color: var(--color-text-light);

    font-size: 14px;
}

.ranking-card__benefit-value {
    color: var(--color-text);

    font-size: 14px;
    font-weight: 700;

    text-align: right;
}

.ranking-card__benefit-value.is-positive {
    color: var(--color-primary);
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.ranking-card__button {
    width: 100%;

    justify-content: center;
}


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

@media (max-width: 900px) {

    .ranking {
        padding: 70px 0;
    }

    .ranking__desktop {
        display: none;
    }

    .ranking__mobile {
        display: block;
    }

}


@media (max-width: 600px) {

    .ranking {
        padding: 60px 0;
    }

    .ranking__header {
        margin-bottom: 35px;
    }

    .ranking-card {
        padding: 20px;
    }

    .ranking-card__header {
        align-items: flex-start;
    }

    .ranking-card__logo img {
        max-width: 110px;
    }

    .ranking-card__price strong {
        font-size: 20px;
    }

}