/* Section: icon steps. A centred two-line heading over a row of steps, each an
   icon, a title and a short line of copy, with a button under the row. Phones
   stack the steps. */

.icon-steps {
    /* 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-white);
    color: var(--color-dark-purple);
}

.icon-steps__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: max(4rem, calc(104 * var(--u))) var(--edge) max(3rem, calc(49 * var(--u)));
}

/* The emphasised line is the design's Philosopher Bold Italic 80/112 and the
   line under it Philosopher Bold 48/56, both tracked in by 1.5px. */
.icon-steps__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-align: center;
    text-wrap: balance;
}

.icon-steps__title-emphasis {
    font-size: max(2.5rem, calc(80 * var(--u)));
    font-style: italic;
    line-height: 1.4;
    letter-spacing: -0.01875em;
}

.icon-steps__title-text {
    font-size: max(1.5rem, calc(48 * var(--u)));
    line-height: 1.1667;
    letter-spacing: -0.03125em;
}

/* ── Steps ───────────────────────────────────────────────── */

.icon-steps__list {
    display: flex;
    gap: calc(24 * var(--u));
    width: 100%;
    margin: max(2.5rem, calc(59 * var(--u))) 0 0;
    padding: 0;
    list-style: none;
}

.icon-steps__step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
    min-width: 0;
    margin: 0;
    padding: calc(40 * var(--u)) 0;
    border-radius: 16px;
    background: var(--color-white);
    text-align: center;
}

.icon-steps__icon {
    display: block;
    width: max(2.5rem, calc(48 * var(--u)));
    height: auto;
}

.icon-steps__body {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
}

/* Title 1: Philosopher Bold 32/38, tracked in by 1px. */
.icon-steps__step-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: max(1.5rem, calc(32 * var(--u)));
    font-weight: var(--fw-bold);
    line-height: 1.1875;
    letter-spacing: -0.03125em;
    text-wrap: balance;
}

.icon-steps__step-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: max(1rem, calc(18 * var(--u)));
    font-weight: var(--fw-regular);
    line-height: 1.3333;
    letter-spacing: -0.25px;
    text-wrap: pretty;
}

/* Paint and a base size. The shared button size (global.css) only arrives with
   .btn-fx-ready, which main.js adds, so this is what shows before it runs. */
.icon-steps__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: max(2.5rem, calc(59 * var(--u)));
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ── Phones ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .icon-steps__list {
        flex-direction: column;
        gap: 0.5rem;
    }

    .icon-steps__step {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .icon-steps__body {
        gap: 0.5rem;
        max-width: 26rem;
    }
}