/* ============================================================
   also-interested — "You may also be interested in"
   Figma: Ancillary hub desktop 1407:65307, tablet 1407:74796, mobile
   1407:74429. Also Tech & Platforms 1407:101622, Claims & Support
   1331:136950.

   A transparent section with a pale curve across its top (the frame's
   ellipse, 2880 wide on a 1440 frame, drawn here as one that scales with
   the section). A centred heading, then two cards. Desktop cards are
   gradient 1 with the Action shadow; tablet and mobile are solid
   Secondary (mobile with no shadow), two across then stacked.

   Frame inconsistencies, built as equal (flagged): the cards are 572
   and 560 wide, and the inner gap is 24 in one and 32 in the other. The
   tick circle fill (#334b3f) isn't a variable: --color-tick. The tablet
   and mobile curve is a different mask in the frame; built as the
   desktop one. The template owns the vertical padding.
   ============================================================ */

.also-interested {
    position: relative;
    overflow: hidden;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.also-interested::before {   /* the curve (decoration) */
    content: "";
    position: absolute;
    top: 0;
    left: -69%;
    width: 200%;
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    background: var(--color-surface-tint);
    pointer-events: none;
}
.also-interested__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Heading (centred) ────────────────────────────────────── */
.also-interested__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.also-interested__head .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.also-interested__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}

/* ── Cards ────────────────────────────────────────────────── */
.also-interested__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.also-interested__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px;
    border-radius: 12px;
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    box-shadow: var(--shadow-action);
    color: var(--color-text-inverse);
}
.also-interested__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.also-interested__icon svg {
    display: block;
    width: 30px;
    height: 30px;
}
.also-interested__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.also-interested__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    text-transform: capitalize;
}
.also-interested__body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── List: ticks or numbers ───────────────────────────────── */
.also-interested__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.also-interested__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 23px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.also-interested__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: 24px;
    background: var(--color-tick);
    color: var(--color-accent);
}
.also-interested__marker svg {
    display: block;
    width: 20px;
    height: 20px;
}
.also-interested__list--numbered .also-interested__marker {   /* Action numerals on Tertiary Accent */
    background: var(--color-accent-tint);
    font-family: var(--font-body);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
}

/* The button sits at the foot, so both cards' buttons line up */
.also-interested__action { margin-top: auto; }

/* ── Tablet (1407:74796): two across, solid Secondary ─────── */
@media (max-width: 1024px) {
    .also-interested__inner { gap: 24px; }
    .also-interested__heading { color: var(--color-secondary); font-size: var(--text-mobile-h2); line-height: var(--leading-mobile-h2); width: 90%; }
    .also-interested__cards { gap: 16px; }
    .also-interested__card {
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
        background: var(--color-secondary);
        box-shadow: none;
    }
    .also-interested__icon { width: 30px; height: 30px; }
    .also-interested__icon svg { width: 18px; height: 18px; }
    .also-interested__title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .also-interested__body {
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-body);
    }
    .also-interested__item { font-size: var(--text-mobile-h5); }   /* the frame sets the list at 18, above desktop's 16 */
    .also-interested__list--numbered .also-interested__marker {
        font-size: var(--text-mobile-action);
        line-height: var(--leading-mobile-action);
    }
    .also-interested__action,
    .also-interested__cta { width: 100%; }
    .also-interested__cta { justify-content: center; }
}

/* ── Mobile (1407:74429): stacked, no shadow ──────────────── */
@media (max-width: 767px) {
    /* The stacked cards make the section taller than the curve, so the tint
       runs on to the bottom: the same top arc (half-axes 100% and 50vw),
       straight sides from there down, as tablet looks */
    .also-interested::before {
        bottom: 0;
        aspect-ratio: auto;
        border-radius: 50% 50% 0 0 / 50vw 50vw 0 0;
    }
    .also-interested__cards { grid-template-columns: minmax(0, 1fr); }
}