/* Section: objection cards. A centred heading over three white cards on the
   brand fill, each with a hard offset shadow; tablets and phones stack them. */

.objection-cards {
    /* One Figma pixel of the 1352 content box, shrinking with the viewport. */
    --u: min(1px, (100vw - 2 * var(--container-pad)) / 1352);
    /* Where the site's content column starts and ends; the section is its own
       inline-size container so this ignores the page scrollbar. */
    --edge: max(var(--container-pad), (100cqi - var(--container-max)) / 2);

    position: relative;
    overflow: clip;
    isolation: isolate;
    container-type: inline-size;
    background: var(--color-primary);
    color: var(--color-white);
}

/* A screen tall at 1512, with the heading and cards centred on it. */
.objection-cards__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(80 * var(--u));
    min-height: calc(982 * var(--u));
    padding: calc(80 * var(--u)) var(--edge);
}

.objection-cards__head {
    display: grid;
    gap: calc(8 * var(--u));
    text-align: center;
}

/* Display/H-Display: Philosopher Bold Italic 80/88. */
.objection-cards__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
    text-wrap: balance;
}

/* Body-2XL-Semibold: Raleway SemiBold 40/52. */
.objection-cards__intro {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-title3);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.5px;
    text-wrap: balance;
}

/* ── Cards ───────────────────────────────────────────────── */

.objection-cards__list {
    display: flex;
    align-items: stretch;
    gap: calc(60 * var(--u));
    width: min(100%, calc(1203 * var(--u)));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The shadow is a flat, darker purple set 15px off, drawn in the design as a
   drop shadow with no blur. */
.objection-cards__card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: calc(32 * var(--u));
    min-width: 0;
    margin: 0;
    padding: calc(64 * var(--u)) calc(40 * var(--u));
    border: 1px solid var(--color-soft-purple);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 15px 15px 0 #313081;
    color: var(--color-dark-purple);
    text-align: center;
}

.objection-cards__card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-title4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title4);
    letter-spacing: -1px;
}

.objection-cards__icon {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: max(2.5rem, calc(64 * var(--u)));
}

.objection-cards__card-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--fw-regular);
    line-height: 1.6667;
    letter-spacing: -0.25px;
}

/* Tablet: three cards side by side leave too little room for the copy, so
   they stack at a comfortable reading width. */
@media (max-width: 1024px) {
    .objection-cards__inner {
        gap: 3.5rem;
        min-height: 0;
        padding-block: 4.5rem;
    }

    .objection-cards__head {
        gap: 0.75rem;
    }

    .objection-cards__list {
        flex-direction: column;
        gap: 2rem;
        width: min(100%, 36rem);
    }

    .objection-cards__card {
        flex: 0 0 auto;
        gap: 1.5rem;
        padding: 3rem 2rem;
    }
}

@media (max-width: 768px) {
    .objection-cards__inner {
        gap: 2rem;
        padding: 3.75rem var(--edge);
    }

    .objection-cards__head {
        gap: 1rem;
    }

    /* The phone design fills the first line and leaves the "buts" to the
       second, so these wrap plainly rather than balance. */
    .objection-cards__title {
        font-size: 2.5rem;
        font-style: normal;
        line-height: 1.2;
        letter-spacing: -1.25px;
        text-wrap: wrap;
    }

    .objection-cards__intro {
        font-size: 1.25rem;
        line-height: 1.6;
        letter-spacing: -0.5px;
        text-wrap: wrap;
    }

    .objection-cards__list {
        gap: 1.5rem;
        width: 100%;
    }

    .objection-cards__card {
        gap: 1rem;
        padding: 2.5rem 1rem;
    }

    .objection-cards__card-title {
        font-size: 1.25rem;
        line-height: 1.4;
        letter-spacing: -0.5px;
    }

    .objection-cards__icon {
        height: 2.5rem;
    }
}