/* BuzzPro family: shared top bar + footer block for leadbuzzpro.com, postbuzzpro.com and sendbuzzpro.com.
   Source of truth: /home/claude/buzz/family/family.css. Copied into each site's assets/family/ by sync.mjs.
   Edit here, then run `node sync.mjs`. Every class is prefixed with bzf- so it can't clash with a site's own CSS. */
.bzf-bar, .bzf-foot {
  --bzf-night: #0E0C1F; --bzf-night-2: #17152E; --bzf-line: rgba(255, 255, 255, .09);
  --bzf-text: #D9D6EE; --bzf-muted: #A9A5C8; --bzf-honey: #FBBF24;
  --bzf-lead: linear-gradient(135deg, #4F46E5, #9333EA); --bzf-lead-tint: #C4B5FD;
  --bzf-post: linear-gradient(135deg, #E11D48, #F97316); --bzf-post-tint: #FECDD3;
  --bzf-send: linear-gradient(135deg, #0284C7, #0D9488); --bzf-send-tint: #99F6E4;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bzf-bar *, .bzf-foot * { box-sizing: border-box; }
.bzf-in { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.bzf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.bzf-bar { background: var(--bzf-night); color: var(--bzf-text); font-size: 13px; line-height: 1; border-bottom: 1px solid var(--bzf-line); position: relative; z-index: 30; }
.bzf-bar .bzf-in { display: flex; align-items: center; gap: 18px; min-height: 40px; }
.bzf-title { font-weight: 600; color: var(--bzf-muted); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; white-space: nowrap; }
.bzf-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.bzf-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; color: var(--bzf-text); text-decoration: none; white-space: nowrap; position: relative; transition: background .15s, color .15s; }
.bzf-item img { width: 18px; height: 18px; flex: none; border-radius: 5px; }
.bzf-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.bzf-item:focus-visible, .bzf-foot a:focus-visible { outline: 2px solid var(--bzf-honey); outline-offset: 2px; }
.bzf-name { font-weight: 600; color: #fff; }
.bzf-what { color: var(--bzf-muted); }
.bzf-item[aria-current] { background: rgba(255, 255, 255, .09); }
.bzf-item[aria-current]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; }
.bzf-lead[aria-current]::after { background: var(--bzf-lead); }
.bzf-post[aria-current]::after { background: var(--bzf-post); }
.bzf-send[aria-current]::after { background: var(--bzf-send); }
.bzf-note { display: inline-flex; align-items: center; gap: 7px; color: var(--bzf-text); white-space: nowrap; font-weight: 500; }
.bzf-note svg { width: 15px; height: 15px; color: var(--bzf-honey); flex: none; }
a.bzf-note { text-decoration: none; padding: 6px 8px; margin-right: -8px; border-radius: 8px; transition: background .15s, color .15s; }
a.bzf-note:hover { background: rgba(255, 255, 255, .07); color: #fff; }
a.bzf-note:focus-visible { outline: 2px solid var(--bzf-honey); outline-offset: 2px; }
.bzf-note-cta { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--bzf-line); color: var(--bzf-honey); font-weight: 600; }
.bzf-all { color: var(--bzf-honey); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bzf-all:hover { text-decoration: underline; }
@media (max-width: 900px) { .bzf-title, .bzf-what { display: none; } }
@media (max-width: 1040px) { .bzf-note-cta { display: none; } }
@media (max-width: 640px) {
  .bzf-bar .bzf-in { padding: 0 10px; gap: 6px; justify-content: space-between; }
  .bzf-list { gap: 0; flex: 0 1 auto; }
  .bzf-item { padding: 6px 7px; gap: 5px; font-size: 12.5px; }
  .bzf-item img { width: 16px; height: 16px; }
  .bzf-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bzf-item[aria-current]::after { left: 7px; right: 7px; }
  .bzf-note { font-size: 12px; gap: 5px; }
  .bzf-note-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 359px) { .bzf-note { display: none; } }

/* ---------- footer block ---------- */
.bzf-foot { background: var(--bzf-night); color: var(--bzf-text); padding: 56px 0 26px; font-size: 15px; line-height: 1.55; }
.bzf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 40px; flex-wrap: wrap; margin-bottom: 26px; }
.bzf-kicker { margin: 0 0 6px; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bzf-honey); }
.bzf-head h2 { margin: 0; font: 700 24px/1.25 'Poppins', 'Inter', sans-serif; color: #fff; letter-spacing: -.01em; }
.bzf-pitch { margin: 0; max-width: 470px; color: var(--bzf-muted); font-size: 15px; }
.bzf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.bzf-card { position: relative; background: var(--bzf-night-2); border: 1px solid var(--bzf-line); border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.bzf-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.bzf-card.bzf-lead::before { background: var(--bzf-lead); }
.bzf-card.bzf-post::before { background: var(--bzf-post); }
.bzf-card.bzf-send::before { background: var(--bzf-send); }
.bzf-card img { height: 28px; width: auto; max-width: 100%; display: block; }
.bzf-card p { margin: 0; color: var(--bzf-text); font-size: 14.5px; flex: 1; }
.bzf-go { font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; width: fit-content; }
.bzf-lead .bzf-go { color: var(--bzf-lead-tint); }
.bzf-post .bzf-go { color: var(--bzf-post-tint); }
.bzf-send .bzf-go { color: var(--bzf-send-tint); }
.bzf-go:hover { text-decoration: underline; }
.bzf-here { font-size: 12px; font-weight: 600; color: var(--bzf-muted); border: 1px solid var(--bzf-line); border-radius: 99px; padding: 3px 9px; width: fit-content; }
.bzf-legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bzf-line); font-size: 14px; color: var(--bzf-muted); }
.bzf-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.bzf-legal a { color: var(--bzf-text); text-decoration: none; }
.bzf-legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .bzf-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .bzf-in { padding: 0 16px; } .bzf-foot { padding-top: 44px; } }
@media (prefers-reduced-motion: reduce) { .bzf-item { transition: none; } }