/* blocks_partials — feature-set statement partial. Mirrors Figma node
   1609:9439 ("Feature-set Statement and stats"). Full-bleed darkest-purple
   band: yellow caps eyebrow, a very large lead paragraph, a light-weight
   second paragraph, a row of left-ruled stats and a right-aligned source
   link. No heading element on purpose: the eyebrow carries the section.

   Class-prefixed `.blocks-feature-statement` / `.bfs__*` so nothing leaks.
   Plain CSS, mobile-first, hardcoded breakpoints (WindPress cache will not
   pick up new utilities). */

.blocks-feature-statement {
    /* Break out of the padded site container so the background runs edge
       to edge, same as blocks_increase_conversion. The z-index bump stops
       the theme's .header-shader-overlay tail painting over an in-flow
       background (see blocks_card_grid--dark). */
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: #130041;
    color: #ffffff;
    padding: 64px 0;
}
@media (min-width: 768px) {
    .blocks-feature-statement {
        padding: 80px 0;
    }
}
@media (min-width: 1280px) {
    .blocks-feature-statement {
        padding: 100px 0;
    }
}

.bfs__inner {
    box-sizing: border-box;
    /* Mirror .site_container's horizontal rhythm (1280px cap, 20px gutter,
       same as blocks_card_grid--dark) so the text starts on the same
       vertical line as the hero above it. The Figma frame's 1480px inner
       is wider than anything else on the site. */
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16.5px;
    min-width: 0;
}

/* ---- Eyebrow ---- */

.bfs__eyebrow {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffe256;
}

/* ---- Paragraph pair ---- */

.bfs__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.bfs__lead,
.bfs__body {
    margin: 0;
    font-family: "SF Pro Display", "Inter", sans-serif;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: 0;
    text-wrap: pretty;
}
@media (min-width: 768px) {
    .bfs__lead,
    .bfs__body {
        font-size: 26px;
        line-height: 1.5;
    }
}
@media (min-width: 1280px) {
    .bfs__lead,
    .bfs__body {
        font-size: 30px;
        line-height: 50px;
    }
}

.bfs__lead {
    font-weight: 900;
}

.bfs__body {
    font-weight: 300;
}
.bfs__body strong,
.bfs__body b {
    font-weight: 700;
    color: #ffffff;
}
.bfs__lead em,
.bfs__lead i,
.bfs__body em,
.bfs__body i {
    font-style: italic;
}
.bfs__lead a,
.bfs__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Stats row + source line ---- */

.bfs__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-top: 48px;
    min-width: 0;
}
@media (min-width: 768px) {
    .bfs__footer {
        padding-top: 56px;
    }
}
@media (min-width: 1024px) {
    .bfs__footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 32px;
        padding-top: 70px;
    }
}

.bfs__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}
@media (min-width: 768px) {
    .bfs__stats {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px 40px;
    }
}

.bfs__stat {
    --bfs-stat-colour: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 17px;
    border-left: 2px solid var(--bfs-stat-colour);
    min-width: 0;
}

.bfs__stat-value {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #ffffff;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .bfs__stat-value {
        font-size: 42px;
    }
}

.bfs__stat-text {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #e7deff;
}
@media (min-width: 1024px) {
    .bfs__stat-text {
        min-width: 160px;
    }
}

.bfs__source {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .bfs__source {
        text-align: right;
    }
}
.bfs__source-link {
    font-weight: 500;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 2px;
}
.bfs__source-link:hover {
    color: #ffe256;
}