/* blocks_increase_conversion — Figma node 1424:13923. Dark full-width
   feature-benefit block: opt-in mockup graphic on the left, content
   column on the right, "1M Pre-orders report" banner footer.

   The section breaks out of the page's padded site_container so the
   dark background extends edge-to-edge regardless of where the
   shortcode sits in post content.

   Inner grid (≥1024): 2fr / 1fr / 2fr — left graphic, empty spacer,
   right content. The banner sits on its own row (full-bleed strip),
   with its inner re-using the same 3-track grid so the text lands in
   track 3, visually centered under the right column. */

.blocks-increase-conversion {
    position: relative;
    background: #130041;
    color: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

/* ---- Inner content row ---- */

.bic__inner {
    position: relative;
    box-sizing: border-box;
    max-width: 1700px;
    margin: 0 auto;
    padding: 64px 24px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .bic__inner {
        padding: 96px 32px 0;
        gap: 56px;
    }
}

@media (min-width: 1200px) {
    .bic__inner {
        grid-template-columns: 2fr 3fr;
        column-gap: 32px;
        padding: 128px 32px 0;
        align-items: end;
    }
    .bic__col-left  { grid-column: 1; }
    .bic__col-right {
        grid-column: 2;
        /* Center the content track within the right 3/5 area
           (cols 3-5). The content's max-width does the rest. */
        justify-self: center;
        width: 100%;
    }
}

/* ---- Left column (graphic, anchored bottom-left) ---- */

.bic__col-left {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.bic__graphic {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1643 / 1208;
}

@media (min-width: 1200px) {
    /* Pull the column toward the viewport's left edge so the snowboard
       portion of the graphic bleeds off-screen. */
    .bic__col-left {
        margin-left: -32px;
        /* Pull the bottom of the graphic flush with the section's bottom
           edge — i.e. one banner-height below its column track — so the
           image visually rests on the bottom of the block while the
           purple banner runs behind it. Banner row is ~42px tall (14px
           padding × 2 + ~14px line-height); use a CSS var so any future
           tweak to banner padding/font-size has a single source of
           truth. */
        position: relative;
        z-index: 2;
        --bic-banner-h: 42px;
        margin-bottom: calc(var(--bic-banner-h) * -1);
    }
}
@media (min-width: 1280px) {
    .bic__col-left {
        margin-left: -60px;
    }
}
@media (min-width: 1700px) {
    .bic__col-left {
        margin-left: calc((100vw - 1700px) / -2 - 32px);
    }
}

/* ---- Right column (content) ---- */

.bic__col-right {
    min-width: 0;
    max-width: 700px;
    padding-bottom: 72px;
}
@media (min-width: 1024px) {
    .bic__col-right { padding-bottom: 112px; }
}

.bic__eyebrow {
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.33;
    text-transform: uppercase;
    color: #ffe256;
}

.bic__h3 {
    margin: 0;
    font-family: 'SF Pro Display', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #ffffff;
}
@media (min-width: 768px) { .bic__h3 { font-size: 44px; } }
@media (min-width: 1024px) { .bic__h3 { font-size: 44px; } }
@media (min-width: 1280px) { .bic__h3 { font-size: 50px; } }
@media (min-width: 1500px) { .bic__h3 { font-size: 56px; } }

.bic__body {
    margin: 24px 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.625;
    color: #e7e3ff;
}
@media (min-width: 1024px) { .bic__body { font-size: 18px; } }
.bic__body p { margin: 0 0 1em; color: #e7e3ff; }
.bic__body p:last-child { margin-bottom: 0; }
.bic__body a { color: inherit; text-decoration: underline; }

/* ---- Feature cards (2-up) ---- */

.bic__cards {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) {
    .bic__cards {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

.bic__card {
    padding: 4px 0 4px 24px;
    border-left: 2px solid transparent;
}
.bic__card--yellow { border-left-color: #ffe256; }
.bic__card--cyan   { border-left-color: #afebff; }

.bic__card-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
}

.bic__card-body {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    color: #e7e3ff;
    opacity: 0.7;
}

/* ---- Footer banner (full-width strip; text centers under right col) ---- */

.bic__banner {
    background: #29165e;
    color: #e7e3ff;
    text-decoration: none;
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}
.bic__banner--link { transition: background 150ms ease; }
.bic__banner--link:hover { background: #361e74; }

.bic__banner-inner {
    box-sizing: border-box;
    max-width: 1700px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .bic__banner-inner { padding: 14px 32px; }
}

@media (min-width: 1200px) {
    .bic__banner-inner {
        display: grid;
        grid-template-columns: 2fr 3fr;
        column-gap: 32px;
    }
    .bic__banner-text {
        grid-column: 2;
        text-align: center;
        justify-self: stretch;
    }
}

.bic__banner-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}