/* Round16 — Marketplace — section-proven
   Figma: 4096:6151 (desktop) | 4096:6287 (tablet/mobile, shared breakpoint <=1024px)
   Stat grid with a decorative dotted-globe graphic on the right (font: Konstant Grotesk
   for the big numbers, enqueued as 'konstant-grotesk' alongside this section). */

.r16-proven {
    /* Dark theme + description-lg tokens come from global.css (see body.page-template-
       static-pages-R16page-marketplace-php and --fs-description-lg) -- not redefined here. */

    position: relative;
    display: flex;
    justify-content: center;
    background: var(--color-1st-bg);
    /* Papers over a hairline sub-pixel gap some browsers can render between two
       adjacent same-color sections (fractional computed heights from flex/aspect-ratio
       layout round independently per element) -- paint-only, doesn't affect layout.
       NOTE: this section's own overflow:hidden below clips this shadow on both edges --
       it's section-introducing (above) and section-steps (below) that actually cover
       this section's two boundaries with their own copies of the same shadow. Kept here
       too for consistency/documentation, harmless even though clipped. */
    box-shadow: 0 -2px 0 0 var(--color-1st-bg), 0 2px 0 0 var(--color-1st-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    font-family: var(--font-body);
    overflow: hidden;
}

.r16-proven * {
    box-sizing: border-box;
}

.r16-proven__globe {
    position: absolute;
    right: 0;
    top: 37.2px;
    width: 728px;
    height: 788px;
    z-index: 0;
    pointer-events: none;
}

.r16-proven__globe-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.r16-proven__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap, 80px);
    width: 100%;
    max-width: var(--container-max, 1400px);
}

.r16-proven__headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-16, 16px);
    max-width: 800px;
}

.r16-proven__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r16-proven__desc {
    margin: 0;
    font-size: var(--fs-body, 16px);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
}

.r16-proven__stats {
    display: flex;
    flex-direction: column;
    gap: var(--var-40, 40px);
    width: 100%;
}

.r16-proven__row {
    display: flex;
    gap: var(--var-96, 96px);
    width: 100%;
}

.r16-proven__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex: 1 0 0;
    min-width: 0;
    gap: var(--var-16, 16px);
    padding-bottom: var(--var-8, 8px);
    border-bottom: 1px solid var(--color-reverse-stroke, #4a4949);
}

.r16-proven__number {
    font-family: 'Konstant Grotesk', var(--font-heading);
    font-weight: 400;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r16-proven__label {
    flex-shrink: 0;
    font-size: var(--fs-description-lg);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .r16-proven {
        /* Figma tablet (4096:6287): py-[var(--var-72,72px)] -- --var-140 doesn't
           auto-respond to the breakpoint on its own, unlike --section-horizontal-padding. */
        padding-top: var(--var-72, 72px);
        padding-bottom: var(--var-72, 72px);
    }

    .r16-proven__globe {
        right: -340px;
        top: 0.29px;
    }

    .r16-proven__row {
        gap: var(--var-20, 20px);
    }

    .r16-proven__stats {
        gap: var(--var-60, 60px);
    }

    .r16-proven__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--var-12, 12px);
    }

    .r16-proven__label {
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .r16-proven__row {
        flex-direction: column;
        gap: var(--var-40, 40px);
    }
}