/* ============================================================
   BEINC — Insights page-level overlays
   - 2 long screen-edge dashed verticals that span hero + grid
     and end behind (overlapping) the brand element divider's
     vertical mid-point.
   - Brand element divider colour overrides (cream bg, black2
     bars + outline) for this page only.
   ============================================================ */

/* Page-level edge verticals — sit at the global pad-x on each
   side. JS sets their `top: 0` and `height` (= hero + grid +
   half of divider). Reveal/destruct mirrors the hero frame. */
.insights-edge-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.insights-edge-guide {
    position: absolute;
    top: 0;
    width: 0;
    border-left: var(--guide-border);
    border-color: var(--color-greyish);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center top;
    will-change: transform, opacity;
    /* Reveal once via CSS — kept independent of the JS destruct/
       reform cycle so these never disappear on scroll. The
       1.6s delay matches the desktop REVEAL_DELAY in
       insights-hero.js so everything still arrives in lockstep. */
    animation: insightsEdgeReveal 1.2s linear 1.6s 1 forwards;
}

.insights-edge-guide--left  { left:  var(--pad-x); }
.insights-edge-guide--right { right: var(--pad-x); }

/* Mobile: shorter REVEAL_DELAY (1.8s) keeps it in sync with the
   hero's nav-frame reveal. */
@media (max-width: 767px) {
    .insights-edge-guide {
        animation-delay: 1.8s;
    }
}

@keyframes insightsEdgeReveal {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* Hide on mobile — per brief, mobile only has the side edge
   verticals, but the visual scale of the page makes them
   redundant; we keep them visible at all breakpoints since
   they're the only verticals on mobile. */


/* ── Page background ──
   Body uses the global `--color-bg` (black2). On this page
   everything is on cream, so set the page-level background
   here. With the body cream, the brand element divider can
   drop its own background so the screen-edge dashed lines
   show THROUGH the divider where they overlap (the divider
   is thinner than the section's full height, so the lines
   continue into the divider area visibly above and below
   the SVG cluster). */
.insights-page {
    background: var(--color-white);
}

/* ── Brand element divider override (Insights page) ──
   Transparent background (the page bg shows through), with
   bars + outline shifted to black2. Sits ABOVE the edge-
   guide dashed verticals (which use --z-indicator = 5), so
   the animated shape paints on top of where the lines end. */
.insights-page .sbed-section {
    background: transparent;
    position: relative;
    z-index: 6;
}

.insights-page .sbed-section .brand-bar {
    fill: var(--color-black2);
}