/* ==========================================================
   BYONPB — v2 header (pill navigation)
   Loaded by every page so the site header is identical
   everywhere. Scoped to body.v2. Only touches the header.
   ========================================================== */
.v2 {
    --paper: #f4f7f8;
    --line: #dde5e8;
    --ink: #132136;
    --muted: #5b6b7c;
    --navy: var(--dark);
    --navy-2: var(--dark-2);
    --lime: var(--yellow);
    --lime-dark: var(--yellow-dark);
    --sh-band: 0 22px 60px rgba(15, 23, 42, .12);
}

/* ==========================================================
   HEADER — pill navigation
   ========================================================== */
.v2 .bp-header {
    position: sticky;
    top: 0;
    background: rgba(244, 247, 248, .9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: none;
}

.v2 .bp-header.is-scrolled {
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--sh-sm);
}

.v2 .bp-header-inner {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    height: 78px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0;
}

.v2 .bp-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.v2 .bp-nav-link {
    border: 0;
    background: transparent;
    padding: 10px 13px;
    border-radius: 999px;
    color: #43536b;
    font-weight: 700;
    font-size: .875rem;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.v2 .bp-nav-link::after {
    display: none;
}

.v2 .bp-nav-link:hover,
.v2 .bp-nav-link.is-active {
    background: var(--navy);
    color: #fff;
}

.v2 .bp-drop-btn svg {
    width: 14px;
    height: 14px;
}

.v2 .bp-cta {
    background: var(--yellow);
    color: var(--navy);
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
}

.v2 .bp-cta:hover {
    background: #fde047;
}

.v2 .bp-cta svg {
    width: 16px;
    height: 16px;
}


@media (max-width: 1100px) {
    .v2 .bp-nav {
        display: none;
    }
}

@media (max-width: 620px) {
    .v2 .bp-header-inner {
        width: min(100% - 24px, 1180px);
        height: 68px;
    }
}

/* Narrow phones (320–360): logo + CTA + burger overflowed the bar. */
@media (max-width: 380px) {
    .v2 .bp-header-inner {
        gap: 10px;
    }

    .v2 .bp-cta {
        padding: 9px 12px;
        font-size: .8rem;
        gap: 6px;
    }

    .v2 .bp-cta svg {
        width: 14px;
        height: 14px;
    }
}

/* Below 340px the wordmark is what gives; the CTA is worth more
   than the lettering, and the logo mark still identifies the site. */
@media (max-width: 345px) {
    .v2 .bp-logo-text {
        display: none;
    }

    .v2 .bp-cta {
        padding: 9px 12px;
    }
}

/* ==========================================================
   ACTIVE PILL SIZE FIX
   home.css gives .bp-nav-link `height: 100%`, so every link
   filled the 78px bar and the active pill rendered as a huge
   dark blob. Size the pill to its own text instead.
   ========================================================== */
.v2 .bp-nav-link {
    height: auto;
    align-self: center;
    padding: 8px 14px;
    line-height: 1.25;
    border-radius: 999px;
}

.v2 .bp-cta {
    height: auto;
    align-self: center;
    padding: 9px 16px;
    line-height: 1.25;
}

.v2 .bp-drop {
    display: flex;
    align-items: center;
}