/* ==========================================================================
   "No fees" banner  ·  Figma node 334:1736
   Shared between careers.html and career-detail.html.
   Gradient/grid card with a headline + an avatar that pops above the card.
   ========================================================================== */

.legit-section {
    background-color: var(--color-neutral-50);
    padding-block: 56px;
}

.legit-card__wrap {
    --avatar-w: clamp(110px, 22vw, 205px);
    --avatar-right: clamp(8px, 4vw, 180px);
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    position: relative;
}

.legit-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 160px;
    padding: 28px 24px;
    padding-right: calc(var(--avatar-w) + var(--avatar-right) + 16px);
    overflow: hidden;
    background: #f6f7f9 url("../assets/images/careers/hiring-background.png") center / cover no-repeat;
}

.legit-text {
    margin: 0;
    max-width: 604px;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(18px, 2.4vw, 32px);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(17, 24, 39, 0.6);
}

.legit-text strong {
    font-weight: 700;
    color: #00478b;
}

/* Avatar pops above the card on the right (sibling of the card) */
.legit-avatar {
    display: block;
    position: absolute;
    right: var(--avatar-right);
    bottom: 0;
    width: var(--avatar-w);
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* md and up */
@media (min-width: 768px) {
    .legit-section { padding-block: 72px; }

    .legit-card {
        min-height: 200px;
        padding-left: clamp(48px, 12%, 160px);
    }
}

/* lg and up */
@media (min-width: 992px) {
    .legit-section { padding-block: 80px 120px; }
}