/*
 * Comparison: heading, then option cards in a row (a column under 780px).
 */

.blk--comparison {
    --cmp-gap: 40px;
    --cmp-card-stagger: .2s;   /* each card after the one before */
    --cmp-points-lag: .35s;    /* first point after its card starts */
    --cmp-point-gap: .08s;     /* between points */
}

/* ---------- Heading ---------- */

.comparison__heading {
    margin-bottom: var(--space-md);
}

.comparison__heading:has(.text-group__body) {
    margin-bottom: var(--step-8);
}

.comparison__heading .text-group__heading,
.comparison__heading .text-group__body {
    max-width: var(--heading-width, 700px);
}

.comparison__heading .text-group__body {
    max-width: var(--body-width, 700px);
}

/* ---------- Cards ---------- */

.comparison__cards {
    display: flex;
    justify-content: center;
    gap: var(--cmp-gap);
}

.comparison__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 572px;
    padding: 32px;
}

.comparison--fill .comparison__card {
    flex: 1 1 0;
    max-width: none;
}

/* Outlined: a gradient hairline and a wide soft shadow */
.comparison__card--outlined {
    border: 1px solid transparent;
    border-image: linear-gradient(275deg, var(--theme-500) -44.18%, var(--theme-800) 164.09%) 1;
    box-shadow: 20px 20px 100px color-mix(in srgb, var(--neutral-800) 12%, transparent);
}

.is-dark .comparison__card--outlined {
    background: var(--neutral-900);
}

.comparison__title {
    color: var(--heading);
    font-family: var(--font-sans); /* a heading, in the body font (like FAQ questions) */
}

.comparison__card--outlined .comparison__title {
    margin-bottom: var(--step-6);
}

.comparison__text {
    margin: var(--step-6) 0;
}

.comparison__title + .comparison__text {
    margin-top: 0;
}

/* Filled (".comparison__card--plum", the block's colour theme) and grey: rounded, flat,
   smaller titles and text. Grey stays grey whatever the theme. */
.comparison__card--plum,
.comparison__card--grey {
    padding: 32px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.comparison__card--plum {
    --heading: var(--white);
    --text: var(--white);
    background: var(--theme-800);
    color: var(--white);
}

.comparison__card--grey {
    --heading: var(--black);
    --text: var(--neutral-800);
    border-color: var(--neutral-200);
    background: var(--neutral-100);
    color: var(--neutral-800);
}

:is(.comparison__card--plum, .comparison__card--grey) .comparison__title {
    margin-bottom: var(--step-5);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

/* ---------- Points ---------- */

.comparison__points {
    margin-bottom: var(--step-7);
    padding: 0;
    list-style: none;
}

.comparison__point {
    display: flex;
    gap: 12px;
    margin-top: var(--step-2);
}

:is(.comparison__card--plum, .comparison__card--grey) .comparison__points {
    display: flex;
    flex-direction: column;
    gap: var(--step-4);
}

:is(.comparison__card--plum, .comparison__card--grey) .comparison__point {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.comparison__points:last-child {
    margin-bottom: 0;
}

.comparison__icon {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.comparison__marker {
    position: relative;
    flex: none;
    align-self: center;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.comparison__marker--check,
.comparison__marker--plus {
    align-self: flex-start;
    width: 14px;
    height: 14px;
    margin-top: .3em;
    border-radius: 0;
    background: none;
}

.comparison__marker--check::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 10px;
    height: 6px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(-45deg);
}

.comparison__marker--plus {
    color: var(--theme-600);
}

.comparison__marker--plus::before,
.comparison__marker--plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.comparison__marker--plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------- Button, image, footnote ---------- */

.comparison__button {
    margin-top: auto;
    margin-bottom: var(--step-9);
}

.comparison__media img {
    width: 100%;
    height: auto;
}

.comparison__point + .comparison__media,
.comparison__points + .comparison__media {
    margin-top: auto;
}

.comparison__note {
    display: flex;
    flex-direction: column;
    gap: var(--step-2);
    margin-top: auto;
    padding-top: var(--step-6);
    border-top: 1px solid var(--neutral-300);
    font-size: 14px;
    line-height: 1.6;
}

.comparison__note > * {
    margin: 0;
}

@media (max-width: 1224px) {
    .blk--comparison {
        --cmp-gap: 24px;
    }

    .comparison__card {
        max-width: 479px;
        padding: 32px 24px;
    }

    .comparison__card--outlined :is(.comparison__text, .comparison__points) {
        font-size: 16px;
    }

    .comparison__card--outlined .comparison__title {
        font-size: 32px;
    }
}

@media (max-width: 780px) {
    .comparison__cards {
        flex-direction: column;
    }

    .comparison__card--outlined {
        padding: 18px;
    }
}

@media (max-width: 600px) {
    .comparison__heading,
    .comparison__heading:has(.text-group__body) {
        margin-bottom: var(--space-md);
    }

    .comparison__card--outlined .comparison__title {
        font-size: 28px;
    }

    .comparison__card--plum,
    .comparison__card--grey {
        padding: 24px 16px;
    }
}

/* ---------- Entrance (script.js) ----------
   The heading comes in from the left (or up when centred); the cards rise one after the
   other; in each, the points follow one by one, their markers popping in, and an image
   settles in with the masked zoom. */

.blk--comparison.rv :is(.comparison__heading, .comparison__card, .comparison__point) {
    opacity: 0;
}

.blk--comparison.rv.rv-from-left .comparison__heading {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--comparison.rv.rv-from-below .comparison__heading {
    transform: translateY(var(--reveal-rise));
}

.blk--comparison.rv .comparison__card {
    translate: 0 var(--reveal-rise);
}

.blk--comparison.rv .comparison__point {
    translate: calc(var(--reveal-shift) * -.3) 0;
}

.blk--comparison.rv .comparison__point > :is(.comparison__icon, .comparison__marker) {
    scale: 0;
}

.blk--comparison.rv .comparison__media img {
    --mz: var(--reveal-zoom);
    scale: var(--mz);
    clip-path: inset(calc((1 - 1 / var(--mz)) * 50%));
}

.blk--comparison.rv-armed .comparison__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--comparison.rv-armed .comparison__card {
    --cmp-at: calc(var(--rv-start, 0s) + var(--cmp-i, 0) * var(--cmp-card-stagger));
    transition:
        opacity var(--reveal-text) ease var(--cmp-at),
        translate calc(var(--reveal-text) + .1s) var(--reveal-ease) var(--cmp-at);
}

.blk--comparison.rv-armed .comparison__point {
    --cmp-pt-at: calc(var(--cmp-at) + var(--cmp-points-lag) + var(--cmp-p, 0) * var(--cmp-point-gap));
    transition:
        opacity calc(var(--reveal-text) * .7) ease var(--cmp-pt-at),
        translate calc(var(--reveal-text) * .7) var(--reveal-ease) var(--cmp-pt-at);
}

.blk--comparison.rv-armed .comparison__media img {
    transition: --mz var(--reveal-media) var(--reveal-ease) var(--cmp-at);
}

.blk--comparison.rv.rv-heading-in .comparison__heading,
.blk--comparison.rv.rv-cards-in :is(.comparison__card, .comparison__point) {
    opacity: 1;
    transform: none;
    translate: none;
}

.blk--comparison.rv.rv-cards-in .comparison__media img {
    --mz: 1;
}

.blk--comparison.rv.rv-cards-in .comparison__point > :is(.comparison__icon, .comparison__marker) {
    scale: 1;
    animation: comparison-pop .5s ease-out both;
    animation-delay: calc(var(--cmp-pt-at, 0s) + .05s);
}

@keyframes comparison-pop {
    0% { scale: 0; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    55% { scale: 1.25; animation-timing-function: ease-in-out; }
    80% { scale: .95; animation-timing-function: ease-in-out; }
    100% { scale: 1; }
}