/* Exact implementation of Figma node 7:238 (process). */
@media (min-width: 781px) {
    .process.section--blue {
        padding: 64px 0;
        background: #dde8f8;
        border-radius: 64px;
    }

    .process .container {
        width: min(calc(100% - 256px), 1440px);
        max-width: 1440px;
    }

    .process .section-title {
        margin: 0;
        font-family: 'Aeroport', Arial, sans-serif;
        font-size: 64px;
        font-weight: 500;
        line-height: 64px;
        letter-spacing: -4px;
        text-align: center;
    }

    .process__content {
        display: flex;
        flex-direction: column;
        gap: 33px;
        width: 100%;
        margin-top: 48px;
    }

    .process__timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        position: relative;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    .process-marker {
        position: relative;
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border: 2px dashed #212124;
        border-radius: 64px;
    }

    .process-marker--4 {
        border-width: 1px;
    }

    .process-marker--1 { grid-column: 1; grid-row: 1; }
    .process-marker--2 { grid-column: 2; grid-row: 1; }
    .process-marker--3 { grid-column: 3; grid-row: 1; }
    .process-marker--4 { grid-column: 4; grid-row: 1; }

    .process-marker > span {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Aeroport', Arial, sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        color: #212124;
    }

    .process-marker__arc {
        position: absolute;
        z-index: 2;
        display: block;
        max-width: none;
        border: 0;
        pointer-events: none;
    }

    /* Figma exports deliberately extend beyond their 32/64 px frames. */
    .process-marker--1 > .process-marker__arc { top: -1px; left: 32px; width: 33px; height: 33px; }
    .process-marker--2 > .process-marker__arc { top: -1px; left: 32px; width: 33px; height: 66px; }
    .process-marker--3 > .process-marker__arc,
    .process-marker--4 > .process-marker__arc { top: -1px; left: -1px; width: 66px; height: 66px; }

    .process-connector {
        position: absolute;
        z-index: 0;
        top: 32px;
        height: 0;
        width: calc(25% - 64px);
    }

    .process-connector:nth-child(2) {
        left: calc(12.5% + 32px);
    }

    .process-connector:nth-child(4) {
        left: calc(37.5% + 32px);
    }

    .process-connector:nth-child(6) {
        left: calc(62.5% + 32px);
    }

    .process-connector img {
        position: absolute;
        top: -2px;
        right: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        max-width: none;
    }

    .process__cards {
        display: flex;
        align-items: stretch;
        width: 100%;
        gap: 24px;
    }

    .process-step {
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        align-items: center;
        min-width: 1px;
        min-height: 0;
        padding: 24px;
        overflow: hidden;
        border-radius: 32px;
        background: #fff;
        text-align: center;
    }

    .process-step h3,
    .process-step p {
        width: 100%;
        margin: 0;
        font-family: 'Aeroport', Arial, sans-serif;
    }

    .process-step h3 {
        font-size: 32px;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: -1px;
        color: #101012;
    }

    .process-step p {
        margin-top: 16px;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -.25px;
        color: #505759;
    }
}

/* The Figma desktop artboard is 1600 px wide. Scale its rhythm at tablet widths
   instead of letting 64/32/20 desktop values overflow the four-column layout. */
@media (min-width: 781px) and (max-width: 1439px) {
    .process.section--blue {
        padding: 51.2px 0;
        border-radius: 51.2px;
    }

    .process .container {
        width: 84.375%;
    }

    .process .section-title {
        font-size: 51.2px;
        line-height: 51.2px;
        letter-spacing: -3.2px;
    }

    .process__content {
        gap: 26.4px;
        margin-top: 38.4px;
    }

    .process-marker {
        flex-basis: 51.2px;
        width: 51.2px;
        height: 51.2px;
        border-radius: 51.2px;
        border-width: 1.6px;
    }

    .process-marker--4 {
        border-width: .8px;
    }

    .process-marker > span {
        font-size: 19.2px;
        line-height: 25.6px;
    }

    .process-marker--1 > .process-marker__arc { top: -.8px; left: 25.6px; width: 26.4px; height: 26.4px; }
    .process-marker--2 > .process-marker__arc { top: -.8px; left: 25.6px; width: 26.4px; height: 52.8px; }
    .process-marker--3 > .process-marker__arc,
    .process-marker--4 > .process-marker__arc { top: -.8px; left: -.8px; width: 52.8px; height: 52.8px; }

    .process-connector {
        top: 25.6px;
        width: calc(25% - 51.2px);
    }

    .process-connector:nth-child(2) { left: calc(12.5% + 25.6px); }
    .process-connector:nth-child(4) { left: calc(37.5% + 25.6px); }
    .process-connector:nth-child(6) { left: calc(62.5% + 25.6px); }
    .process-connector img { top: -1.6px; height: 1.6px; }

    .process__cards {
        gap: 19.2px;
    }

    .process-step {
        padding: 19.2px;
        border-radius: 25.6px;
    }

    .process-step h3 {
        font-size: 25.6px;
        line-height: 25.6px;
        letter-spacing: -.8px;
    }

    .process-step p {
        margin-top: 12.8px;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: -.2px;
    }
}