/* ============================================================
   BEINC — Insights Connector (Section CSS)
   Final section: eyebrow ("The gap we close") above a divider,
   then a 2-column row with heading on the left and CTA stack
   on the right, capped by another full-bleed dashed line.
   Mobile collapses to a single centered column.
   Depends on: global.css
   ============================================================ */

.insights-connector {
    position: relative;
    width: 100%;
    background: var(--color-white);
    color: var(--color-black2);
    padding: var(--space-7) var(--pad-x) var(--space-9);
}

/* Eyebrow row — single asterisk + "The gap we close" */
.insights-connector__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    line-height: 1;
    color: var(--color-black2);
    margin: 0 0 var(--space-5);
}

.insights-connector__aster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--color-black2);
}

.insights-connector__aster svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: insightsConnectorAsterCW 8s linear infinite;
    transform-origin: 50% 50%;
}

.insights-connector__aster svg path {
    fill: currentColor;
}

@keyframes insightsConnectorAsterCW {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Full-bleed dashed dividers above and below the heading row. */
.insights-connector__hline {
    position: relative;
    margin: 0 calc(var(--pad-x) * -1);
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
}

/* Heading row — heading on left, CTA stack right-aligned. */
.insights-connector__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    padding: var(--space-9) 0;
}

.insights-connector__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    font-size: clamp(2rem, 4.4vw, 4rem);
    margin: 0;
}

.insights-connector__cta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);   /* per brief: 4px between the two buttons */
    flex-shrink: 0;
}

.insights-connector__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1px dashed transparent;
    transition:
        background-color var(--duration-normal) var(--ease-primary),
        color var(--duration-normal) var(--ease-primary),
        border-color var(--duration-normal) var(--ease-primary);
}

/* Top button — black2 default → white + dashed border on hover */
.insights-connector__btn--primary {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}

.insights-connector__btn--primary:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
    border-style: dashed;
}

/* Bottom button — cream + dashed default → black2 solid on hover */
.insights-connector__btn--secondary {
    background: var(--color-white);
    color: var(--color-black2);
    border: 1px dashed var(--color-greyish);
}

.insights-connector__btn--secondary:hover {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}


/* ── MOBILE (≤767): single column, centered everything ── */
@media (max-width: 767px) {
    .insights-connector {
        padding: var(--space-7) var(--pad-x) var(--space-9);
        text-align: center;
    }

    .insights-connector__eyebrow {
        display: inline-flex;
        margin: 0 auto var(--space-5);
    }

    .insights-connector__eyebrow-row {
        text-align: center;
    }

    .insights-connector__row {
        flex-direction: column;
        align-items: center;
        gap: var(--space-7);
        padding: var(--space-7) 0;
    }

    .insights-connector__heading {
        text-align: center;
        font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    }

    .insights-connector__cta-stack {
        align-items: center;
    }
}