/* ============================================================
   process-steps — "How it works"
   Figma: FNOL desktop 1407:100814, mobile 1407:102144 (no tablet
   frame: tablet follows mobile).

   The navy gradient, a centred heading and intro, then the numbered
   cards: four across on desktop, two by two below 1025px. A dashed
   Primary curve runs behind the cards; each layout has its own,
   stretched to the width so it always meets both edges.

   Card fill: the frame's is a hair off Secondary and isn't a
   variable, so it's built as Secondary (flagged). The frames' card
   heights: equal in four of the five services, uneven and centred in
   FNOL; built equal (flagged). The template owns the vertical padding.
   ============================================================ */

.process-steps {
    position: relative;
    overflow: hidden;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
}
.process-steps__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── The curves (decoration) ──────────────────────────────── */
.process-steps__curve {
    position: absolute;
    display: block;
    overflow: visible;
    color: var(--color-primary);
    pointer-events: none;
}
.process-steps__curve--wide {   /* the frame's: 40 from the top, edge to edge */
    top: 40px;
    left: 0;
    width: 100%;
    height: 448px;
}
.process-steps__curve--narrow { display: none; }

/* ── Heading (centred) ────────────────────────────────────── */
.process-steps__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    text-align: center;
}
.process-steps__head .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.process-steps__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    text-transform: capitalize;
}
.process-steps__intro {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── Cards ────────────────────────────────────────────────── */
.process-steps__body { position: relative; }

.process-steps__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.process-steps__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-card-navy);
    text-align: center;
}
.process-steps__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 24px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}
.process-steps__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.process-steps__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}
.process-steps__description {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── Step count: up to five across (the AncillaryHUB's five, T7) ─ */
.process-steps__steps--1 { grid-template-columns: minmax(0, 1fr); }
.process-steps__steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-steps__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.process-steps__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Label pill: "Day 7" in place of a number (T7 1331:138046) ─ */
.process-steps__label {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 24px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── Button under the cards (T8 1407:93819) ───────────────── */
.process-steps__action {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ============================================================
   Light variant (class on the <section>): T4 1407:101474 / mobile
   1407:101855, T6 1331:136809 / mobile 1331:137196.
   A white section, gradient-1 cards, a Primary eyebrow and a Text
   heading. The cards hold their number at the top and centre the
   copy in the space left (the frames' equal-height cards).
   ============================================================ */
.process-steps--light {
    background: none;
    color: var(--color-text);
}
.process-steps--light .process-steps__eyebrow { color: var(--color-primary); }
.process-steps--light .process-steps__curve--wide,
.process-steps--hub .process-steps__curve--wide {   /* measured against the frames: from the top, 457 tall */
    top: 0;
    height: 457px;
}
.process-steps--light .process-steps__step {
    background: var(--gradient-1);
    color: var(--color-text-inverse);
}
.process-steps--light .process-steps__text,
.process-steps--hub .process-steps__text {
    flex: 1 1 auto;
    justify-content: center;
}

/* ============================================================
   AncillaryHUB skin: T7 1331:138046 / mobile 1331:137550.
   "Gradient 3" section, indigo cards, H4 titles, five across at
   223 with 20 padding.
   ============================================================ */
.process-steps--hub { background: var(--gradient-hub); }
.process-steps--hub .process-steps__step {
    padding: 20px;
    background: var(--color-hub);
}
.process-steps--hub .process-steps__title {
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}

/* ── Tablet and mobile (1407:102144) ──────────────────────────
   Two by two, 16 apart; Mobile/H4 titles, Mobile/Body small copy,
   and the narrow curve behind the cards, from the page edge.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .process-steps__curve--wide { display: none; }
    .process-steps__curve--narrow {
        display: block;
        top: -22px;
        left: calc(-1 * var(--space-gutter));
        width: calc(100% + 2 * var(--space-gutter));
        height: 452px;
    }

    .process-steps__head {
        gap: 8px;
        margin-bottom: 20px;
    }
    .process-steps__head .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .process-steps__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .process-steps__intro {   /* 14px Futura in the mobile frame, no text style (flagged) */
        font-family: var(--font-heading);
        font-size: 14px;
    }

    .process-steps__steps,
    .process-steps__steps--3,
    .process-steps__steps--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .process-steps__steps--1 { grid-template-columns: minmax(0, 1fr); }
    /* a lone last card spans the row (the HUB's fifth, 1331:137550) */
    .process-steps__step:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .process-steps__step { padding: 20px; }
    .process-steps__title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .process-steps__description {   /* Mobile/Body small, set in Futura */
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }
}

/* Light and hub on tablet and mobile: Mobile/H3 titles for the light
   frames (1407:101855, 1331:137196); the hub keeps Mobile/H4. */
@media (max-width: 1024px) {
    .process-steps--light .process-steps__curve--narrow { top: -22px; }
    .process-steps--light .process-steps__title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .process-steps--hub .process-steps__title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
}
@media (max-width: 767px) {
    .process-steps__action .btn { width: 100%; }
}