/* ETF BFF — Shared Site CSS (nav + footer) */

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --secondary: #10b981;
    --accent: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border: #e5e7eb;
}

/* ── Reset (shared baseline) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg-white);
    overflow-x: clip; /* clip (not hidden) preserves position:sticky on descendants */
}
html { scroll-behavior: smooth; }

/* ── Skip to main content (keyboard bypass block, WCAG 2.4.1) ── */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    transform: translateY(-120%);
    background: var(--primary);
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ════════════════════════════════════════════
   HEADER / NAV
════════════════════════════════════════════ */
header {
    background: var(--bg-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Anchored headings/sections clear the sticky header when reached via a TOC
   link or #hash, instead of hiding underneath it. Applies site-wide. */
h2[id], h3[id], h4[id], :target { scroll-margin-top: 84px; }

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 64px;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.logo-emoji { font-size: 1.8rem; display: inline-flex; align-items: center; line-height: 1; }
.logo-emoji svg { width: 34px; height: 34px; display: block; }
.logo-bff {
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 0;
    list-style: none;
    align-items: stretch;
    margin: 0 0 0 auto;
    padding: 0;
}

.nav-links > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-links > li > a,
.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

.nav-links > li > a.active { color: var(--primary); }

.nav-links > li > a.active::after,
.nav-links > li:hover > a::after,
.nav-links > li:hover > .nav-trigger::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.nav-links > li > a:hover,
.nav-trigger:hover,
.nav-links > li:focus-within > .nav-trigger { color: var(--primary); }

.nav-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
    color: var(--text-light);
}

.nav-links > li:hover .nav-arrow,
.nav-links > li:focus-within .nav-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    min-width: 240px;
    padding: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
    z-index: 300;
}

.nav-links > li:hover .nav-dropdown,
.nav-links > li:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    transition: background 0.15s;
}

.dropdown-item:hover { background: #f5f3ff; color: var(--primary); }
.dropdown-item:hover .di-title { color: var(--primary); }

.di-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.di-text { flex: 1; min-width: 0; }

.di-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.di-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 0.15rem;
}

.dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem 0.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.35rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    border-radius: 0 0 8px 8px;
    transition: background 0.15s;
}

.dropdown-footer:hover { background: #eef2ff; }

.cta-button {
    display: inline-flex;
    align-items: center;
    background: var(--primary);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    align-self: center;
    margin-left: 0.75rem;
    white-space: nowrap;
    touch-action: manipulation;
}

.cta-button:hover {
    background: var(--primary-dark);
}

.cta-button-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.cta-button-secondary:hover {
    background: var(--primary);
    color: white;
}

#bff-cta-btn { background: var(--secondary); }

#bff-cta-btn:hover {
    background: #059669;
}


.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
    align-self: center;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


@media (max-width: 900px) {
    .nav-links { display: none !important; }
    .mobile-menu-toggle { display: flex !important; align-items: center; justify-content: center; }
    /* html prefix raises specificity to 0,1,1 — beats any page-level #bff-cta-btn { display:none !important } (0,1,0) */
    html #bff-cta-btn { display: inline-flex !important; padding: 0.5rem 0.85rem !important; font-size: 0.8rem !important; margin-left: 0.5rem !important; }
    nav { overflow: visible; } /* overflow: visible avoids toggle clipping */
    .nav-links.mobile-open {
        display: flex !important;
        flex-direction: column;
        /* position: fixed escapes the sticky header's stacking context — avoids iOS Safari rendering bugs */
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border-top: 1px solid var(--border);
        box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        z-index: 1000;
        padding: 0.25rem 0 0.75rem;
        align-items: stretch;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links.mobile-open > li { display: block; }

    .nav-links.mobile-open > li > a,
    .nav-links.mobile-open > li > .nav-trigger {
        display: block;
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--border);
        width: 100%;
        text-align: left;
    }

    .nav-links.mobile-open > li:last-child > a { border-bottom: none; }
    .mobile-menu-toggle.is-open { color: var(--primary); }

    .nav-links.mobile-open .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        padding: 0.3rem 0;
        min-width: 0;
        background: var(--bg-light);
        display: none;
        margin: 0;
    }

    .nav-links.mobile-open > li.mobile-sub-open .nav-dropdown {
        display: block;
        border-bottom: 1px solid var(--border);
    }

    .nav-links.mobile-open .nav-dropdown .dropdown-item {
        padding: 0.85rem 1.5rem 0.85rem 2.75rem;
        border-radius: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-links.mobile-open .nav-dropdown .dropdown-footer {
        padding: 0.75rem 1.5rem 0.75rem 2.75rem;
        border-radius: 0;
        margin-top: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-links.mobile-open .nav-arrow {
        display: block;
        transition: transform 0.22s ease;
    }

    .nav-links.mobile-open > li.mobile-sub-open .nav-arrow {
        transform: rotate(180deg);
        color: var(--primary);
    }

    .nav-links.mobile-open > li > a.nav-trigger { cursor: pointer; }

    .mobile-nav-bff-btn {
        width: calc(100% - 3rem);
        margin: 0.75rem 1.5rem;
        padding: 0.85rem 1.25rem;
        background: var(--secondary);
        color: white;
        font-weight: 700;
        font-size: 0.95rem;
        font-family: inherit;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        touch-action: manipulation;
    }
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */

/* Pre-footer newsletter band */
.footer-newsletter-band {
    background: #312e81;
    padding: 3.5rem 2rem;
}

.fnb-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.fnb-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.55rem;
}

.fnb-heading {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

.fnb-sub {
    color: rgba(255,255,255,0.82);
    font-size: 0.97rem;
    line-height: 1.65;
}

.fnb-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.fnb-form input[type="email"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.fnb-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }

.fnb-form input[type="email"]:focus {
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.18);
}

.fnb-form button {
    padding: 0.75rem 1.5rem;
    background: white;
    color: #4f46e5;
    font-weight: 800;
    font-size: 0.875rem;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.fnb-form button:hover {
    background: #eef2ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.fnb-fine {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.65rem;
}

/* Footer body */
.site-footer { background: #111827; }

.footer-body {
    padding: 2.5rem 2rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 0.8fr;
    gap: 2rem;
}

.footer-logo-mark { width: 26px; height: 26px; vertical-align: -6px; margin-right: 6px; }

.footer-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.9rem;
    transition: color 0.18s;
}

.footer-logo:hover { color: #a5b4fc; }

.footer-tagline {
    color: rgba(255,255,255,0.58);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 260px;
}

.footer-social {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.social-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.social-link svg { width: 15px; height: 15px; }

.social-link:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    color: white;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.footer-col-heading {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: rgba(255,255,255,0.56);
    margin-bottom: 1.2rem;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li { margin-bottom: 0.6rem; }

.footer-nav a {
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.18s;
}

.footer-nav a:hover { color: white; }

.footer-coming-soon { display: inline-flex; align-items: center; gap: 0.45rem; }

.cs-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.28);
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
}

.footer-bottom-bar {
    background: #0d1117;
    padding: 1.5rem 2rem;
}

.fbb-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.fbb-disclaimer {
    font-size: 0.71rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fbb-disclaimer strong {
    color: rgba(255,255,255,0.6);
    font-weight: 700;
}

.fbb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fbb-copy {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.fbb-legal-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.fbb-legal-links a {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    transition: color 0.15s;
}

.fbb-legal-links a:hover { color: rgba(255,255,255,0.7); }
.fbb-legal-links span { color: rgba(255,255,255,0.18); }

/* Footer responsive */
@media (max-width: 1024px) {
    .fnb-inner { grid-template-columns: 1fr; gap: 2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-tagline { max-width: 100%; }
}

/* ── Guide CFA reviewer byline ─────────────────────────────────────────── */
.guide-byline {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-size: 0.8rem; color: #64748b; margin: -0.25rem 0 1.25rem;
}
.byline-reviewed { font-weight: 700; color: #059669; }
.byline-divider  { color: #cbd5e1; }
.byline-updated  { color: #94a3b8; }

@media (max-width: 640px) {
    .footer-newsletter-band { padding: 2.5rem 1rem; }
    .fnb-heading { font-size: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; }
    .fnb-row { flex-direction: column; }
    .fnb-form input[type="email"] { width: 100%; }
    .fnb-form button { width: 100%; padding: 0.85rem; }
}
@media (max-width: 480px) {
    nav { padding: 0 1rem; }
    .footer-body { padding: 2.5rem 1rem 2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-bottom-bar { padding: 1.25rem 1rem; }
    .fbb-meta { flex-direction: column; align-items: flex-start; }
}

/* ── Touch-device input zoom guard ──────────────────────────────────────────
   iOS Safari AUTO-ZOOMS the viewport whenever a focused input has a computed
   font-size under 16px. The zoom shifts the page, pushes the focused field off
   screen, and frequently does not unzoom on blur, which reads to the user as
   "scrolling went weird". Every newsletter input on the site was under the
   threshold: .bff-modal-form at 14.4px (0.9rem) and .fnb-form at 15.2px
   (0.95rem). 16px is the exact cutoff, so this removes the zoom without
   touching desktop typography. Scoped to coarse pointers so it applies to
   phones and tablets (including iPad, which is wide but still touch) and never
   to a mouse-driven desktop.

   !important is load-bearing here, not laziness. A media query adds NO
   specificity, so a bare `input[type="email"]` (0,1,1) loses to every existing
   component rule: `.bff-modal-form input[type="email"]` and
   `.fnb-form input[type="email"]` are both (0,2,1). Written without it, this
   block silently does nothing, which is exactly how the invisible CTA button
   shipped (`.post-body a` beating `.post-cta-btn`). Enumerating the component
   selectors instead would work today and break the first time a new form is
   added, and no validator checks font-size, so nothing would catch it.
   The blast radius is bounded: coarse pointers only, so desktop is untouched. */
@media (pointer: coarse) {
    input[type="email"],
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select { font-size: 16px !important; }

    /* The modal's mobile layout corrections have to live here, with
       !important, for the same cascade reason and one more: 27 pages carry
       their OWN copy of the `.bff-overlay { ... align-items: center }` block in
       a page-level <style>, which comes after this file's <link> and therefore
       wins at equal specificity. Fixing those 27 copies by hand would work
       until the 28th page is added. Overriding once, here, cannot drift.
       Desktop deliberately keeps align-items:center: there is no keyboard
       covering the viewport, so none of this applies. */
    .bff-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .bff-overlay .bff-modal { margin: auto !important; }
}

/* ── Become a BFF Modal ────────────────────────────────── */
.bff-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 2000;
    display: flex;
    /* NOT align-items:center. A position:fixed overlay does not shrink when the
       iOS keyboard opens, so the modal stayed centred in the FULL layout
       viewport while only the top portion was visible. Measured on a 375x812
       iPhone with the keyboard up (476px visible): the email input sat at
       625px and the submit button at 673px, both behind the keyboard, and with
       overflow-y:visible there was no way to scroll to either. On a 375x667
       iPhone SE the input was 145px past the fold.
       flex-start + margin:auto on the child centres the modal when there is
       room and lets it scroll normally when there is not, which is the one
       combination that does not clip the top of an over-tall flex child. */
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    /* Stop scroll chaining to the page behind the overlay. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s;
}
.bff-overlay.is-open { opacity: 1; visibility: visible; }
.bff-modal {
    background: var(--bg-white);
    border-radius: 24px;
    padding: 2.25rem 2rem 2rem;
    max-width: 440px;
    width: 100%;
    /* Centres within the flex container when there is spare room, and simply
       sits at the top (scrollable) when there is not. See .bff-overlay. */
    margin: auto;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.08);
    text-align: center;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bff-overlay.is-open .bff-modal { transform: translateY(0) scale(1); }
.bff-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.bff-modal-close:hover { background: #e5e7eb; color: var(--text-dark); }
.bff-modal-badge {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.bff-modal-emoji { font-size: 3rem; display: block; margin-bottom: 0.6rem; line-height: 1; }
.bff-modal h2 { font-size: 1.85rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.6rem; line-height: 1.15; }
.bff-gradient-text {
            color: var(--primary);
        }
.bff-modal-sub { color: var(--text-light); font-size: 0.925rem; line-height: 1.65; margin-bottom: 1.5rem; }
.bff-perks {
    display: flex; flex-direction: column; gap: 0.55rem;
    margin-bottom: 1.75rem; text-align: left;
    background: var(--bg-light); border-radius: 14px; padding: 1rem 1.1rem;
}
.bff-perk { display: flex; align-items: center; gap: 0.65rem; font-size: 0.875rem; color: var(--text-dark); font-weight: 500; }
.bff-perk-icon { flex-shrink: 0; font-size: 1.05rem; }
.bff-modal-form { display: flex; gap: 0.5rem; margin-bottom: 0.65rem; }
.bff-modal-form input[type="email"] {
    flex: 1; padding: 0.72rem 1rem;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.9rem; font-family: inherit; color: var(--text-dark);
    outline: none; min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.bff-modal-form input[type="email"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.bff-modal-form button[type="submit"] {
    background: var(--primary);
    color: white; border: none;
    padding: 0.72rem 1.2rem; border-radius: 10px;
    font-size: 0.875rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: background 0.18s;
}
.bff-modal-form button[type="submit"]:hover { background: var(--primary-dark); }
.bff-modal-fine { font-size: 0.74rem; color: var(--text-light); margin-bottom: 0; }
.bff-modal-success { display: none; padding: 1.5rem 0 0.5rem; }
.bff-modal-success.is-visible { display: block; }
#bff-form-wrap.is-hidden { display: none; }
.bff-success-emoji { font-size: 2.75rem; display: block; margin-bottom: 0.75rem; }
.bff-modal-success h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; }
.bff-modal-success p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 480px) {
    .bff-modal { padding: 1.75rem 1.25rem 1.5rem; border-radius: 20px; }
    .bff-modal h2 { font-size: 1.55rem; }
    .bff-modal-form { flex-direction: column; }
    .bff-modal-form button[type="submit"] { width: 100%; padding: 0.8rem; }
}

/* ── GUIDE GLOSSARY REFERENCE BLOCK ── */
.guide-glossary-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.875rem 1.125rem;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    margin: 1.5rem 0 2rem;
    font-size: 0.8rem;
    line-height: 1.6;
}
.guide-glossary-ref .ggr-label {
    font-weight: 700;
    color: #4338ca;
    white-space: nowrap;
    margin-right: 0.25rem;
}
.guide-glossary-ref a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #c7d2fe;
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.guide-glossary-ref a:hover { color: #4338ca; border-color: #4338ca; }
.guide-glossary-ref .ggr-dot { color: #c4b5fd; }
.guide-glossary-ref .ggr-all {
    margin-left: auto;
    border-bottom: none;
    font-weight: 700;
    font-size: 0.775rem;
    color: #6d28d9;
    white-space: nowrap;
}
.guide-glossary-ref .ggr-all:hover { color: #4c1d95; }

/* ════════════════════════════════════════════
   CONTENT TAG PILLS  (.ctag)
   Inline callout blocks for learn guides.
   Three variants: watch-out, tax-note, quick-fact.
   Usage: <div class="ctag ctag-watch-out"><span class="ctag-label">Watch Out</span> Body text.</div>
════════════════════════════════════════════ */
.ctag {
    border-left: 3px solid;
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    font-size: 0.92rem;
    line-height: 1.55;
}
.ctag-label {
    display: inline;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 0.45em;
    vertical-align: 0.05em;
}

/* Watch Out — amber */
.ctag-watch-out {
    background: #fffbeb;
    border-color: var(--accent);
}
.ctag-watch-out .ctag-label { color: #b45309; }

/* Tax Note — indigo */
.ctag-tax-note {
    background: #eef2ff;
    border-color: var(--primary);
}
.ctag-tax-note .ctag-label { color: var(--primary-dark); }

/* Quick Fact — green */
.ctag-quick-fact {
    background: #f0fdf4;
    border-color: var(--secondary);
}
.ctag-quick-fact .ctag-label { color: #059669; }