/* ==========================================================================
   pds-compare — option cards over a real table
   ========================================================================== */

.pds-compare__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* The table can outgrow a narrow viewport; it scrolls inside its own box so
   the page itself never scrolls sideways. */
.pds-compare__scroll {
    overflow-x: auto;
    margin-inline: calc(var(--pds-gutter) * -1);
    padding-inline: var(--pds-gutter);
    padding-block-end: .5rem;
    scrollbar-width: thin;
}

.pds-compare__table {
    inline-size: 100%;
    min-inline-size: 44rem;
    border-collapse: separate;
    border-spacing: .75rem 0;
    text-align: start;
}

/* --- Head ------------------------------------------------------------------ */

.pds-compare__corner {
    inline-size: 26%;
    padding: 0 0 1.25rem;
    vertical-align: bottom;
    font-size: var(--pds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pds-muted);
}

.pds--ink .pds-compare__corner {
    color: var(--pds-on-ink-faint);
}

.pds-compare__option {
    inline-size: calc(74% / var(--pds-compare-cols, 3));
    padding: 0 0 1rem;
    vertical-align: bottom;
    font-weight: 400;
}

.pds-compare__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    block-size: 100%;
    padding: clamp(1.125rem, 2vw, 1.5rem);
    border: 1px solid var(--pds-line);
    border-radius: var(--pds-r) var(--pds-r) 0 0;
    border-block-end: 0;
    background: var(--pds-paper);
}

.pds--ink .pds-compare__card {
    background: var(--pds-ink-soft);
    border-color: var(--pds-line-ink);
}

.pds-compare__option.is-featured .pds-compare__card {
    background: var(--pds-purple);
    border-color: var(--pds-purple);
    color: #fff;
    box-shadow: 0 -8px 34px rgba(106, 36, 140, .22);
}

.pds-compare__badge {
    display: inline-block;
    padding: .3125rem .625rem;
    border-radius: 999px;
    background: var(--pds-orange);
    color: #1B0C05;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

.pds-compare__name {
    font-family: var(--pds-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--pds-title);
}

.pds--ink .pds-compare__name,
.pds-compare__option.is-featured .pds-compare__name {
    color: #fff;
}

.pds-compare__price {
    font-family: var(--pds-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--pds-purple);
}

.pds--ink .pds-compare__price,
.pds-compare__option.is-featured .pds-compare__price {
    color: var(--pds-orange);
}

.pds-compare__note {
    font-size: var(--pds-fs-eyebrow);
    line-height: 1.45;
    color: var(--pds-muted);
}

.pds--ink .pds-compare__note {
    color: var(--pds-on-ink-soft);
}

.pds-compare__option.is-featured .pds-compare__note {
    color: rgba(255, 255, 255, .82);
}

.pds-compare__cta {
    margin-block-start: .375rem;
}

.pds-compare__option.is-featured .pds__btn--ghost {
    --_fg: #fff;
    --_bd: rgba(255, 255, 255, .4);
}

/* --- Body ------------------------------------------------------------------ */

.pds-compare__group th {
    padding: 1.75rem 0 .625rem;
    font-size: var(--pds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pds-orange-ink);
    text-align: start;
}

.pds--ink .pds-compare__group th {
    color: var(--pds-orange);
}

.pds-compare__row-label {
    display: table-cell;
    padding: 1rem .5rem 1rem 0;
    border-block-start: 1px solid var(--pds-line);
    font-weight: 600;
    font-size: var(--pds-fs-small);
    color: var(--pds-title);
    text-align: start;
    vertical-align: top;
}

.pds--ink .pds-compare__row-label {
    border-block-start-color: var(--pds-line-ink);
    color: #fff;
}

.pds-compare__row-label small {
    display: block;
    margin-block-start: .25rem;
    font-weight: 400;
    font-size: var(--pds-fs-eyebrow);
    line-height: 1.4;
    color: var(--pds-muted);
}

.pds--ink .pds-compare__row-label small {
    color: var(--pds-on-ink-faint);
}

.pds-compare__cell {
    padding: 1rem;
    border-block-start: 1px solid var(--pds-line);
    background: var(--pds-paper);
    font-size: var(--pds-fs-small);
    vertical-align: top;
}

.pds--ink .pds-compare__cell {
    background: var(--pds-ink-soft);
    border-block-start-color: var(--pds-line-ink);
}

.pds-compare__cell.is-featured {
    background: var(--pds-purple-wash);
    border-block-start-color: rgba(106, 36, 140, .18);
}

.pds--ink .pds-compare__cell.is-featured {
    background: rgba(255, 127, 13, .1);
}

/* The per-cell option name only exists for the stacked mobile layout. */
.pds-compare__cell-head {
    display: none;
}

.pds-compare__mark {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
}

.pds-compare__mark--yes {
    background: rgba(31, 122, 90, .12);
    color: var(--pds-sage);
}

.pds-compare__mark--no {
    background: var(--pds-bone-deep);
    color: var(--pds-muted);
}

.pds--ink .pds-compare__mark--no {
    background: rgba(255, 255, 255, .08);
    color: var(--pds-on-ink-faint);
}

.pds-compare__value {
    display: block;
    line-height: 1.5;
    color: var(--pds-body);
}

.pds--ink .pds-compare__value {
    color: var(--pds-on-ink-soft);
}

.pds-compare__footnote {
    font-size: var(--pds-fs-eyebrow);
    color: var(--pds-muted);
    max-inline-size: 70ch;
}

.pds--ink .pds-compare__footnote {
    color: var(--pds-on-ink-faint);
}

/* --- Stacked layout --------------------------------------------------------
   Below the table's minimum width the grid stops being readable, so each
   option becomes its own card and every cell carries its own label. */

@media (max-width: 780px) {

    .pds-compare__scroll {
        overflow-x: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    /* Unwind the table layout. Every rule below carries the table in its
       selector so it outranks this reset instead of losing to it. */
    .pds-compare__table,
    .pds-compare__table thead,
    .pds-compare__table tbody,
    .pds-compare__table tr,
    .pds-compare__table th,
    .pds-compare__table td {
        display: block;
        min-inline-size: 0;
        inline-size: auto;
        border-spacing: 0;
    }

    .pds-compare__table thead tr {
        display: grid;
        gap: 1rem;
    }

    .pds-compare__table .pds-compare__corner {
        display: none;
    }

    .pds-compare__table .pds-compare__card {
        border-radius: var(--pds-r);
        border-block-end: 1px solid var(--pds-line);
    }

    .pds-compare__table .pds-compare__option.is-featured .pds-compare__card {
        border-block-end-color: var(--pds-purple);
    }

    .pds-compare__table tbody {
        margin-block-start: 2rem;
    }

    .pds-compare__table tbody tr {
        padding-block: 1rem;
        border-block-start: 1px solid var(--pds-line);
    }

    .pds--ink .pds-compare__table tbody tr {
        border-block-start-color: var(--pds-line-ink);
    }

    .pds-compare__table .pds-compare__group th {
        padding-block: .5rem;
    }

    .pds-compare__table .pds-compare__row-label {
        padding: 0 0 .75rem;
        border-block-start: 0;
    }

    .pds-compare__table .pds-compare__cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .4375rem 0;
        border-block-start: 0;
        background: none;
    }

    .pds--ink .pds-compare__table .pds-compare__cell,
    .pds-compare__table .pds-compare__cell.is-featured {
        background: none;
    }

    .pds-compare__table .pds-compare__cell.is-featured .pds-compare__cell-head {
        color: var(--pds-purple);
    }

    .pds-compare__table .pds-compare__cell-head {
        display: block;
        font-size: var(--pds-fs-eyebrow);
        font-weight: 600;
        color: var(--pds-muted);
    }

    .pds--ink .pds-compare__table .pds-compare__cell-head {
        color: var(--pds-on-ink-faint);
    }

    .pds-compare__table .pds-compare__value {
        text-align: end;
    }

    .pds-compare__table .pds-compare__mark {
        flex: none;
    }
}