/* ==========================================================================
   Reel 07 — "Give buyers a reason to choose you" (/resources/research-driven-content-b2b/).
   Loaded after resources.css, oral-arts.css and fire.css (body.res-art.oa.fr.bz reuses their figure kit:
   .oa-fig / .oa-head / .oa-gl / .oa-t, and .fr-box / .fr-lab / .fr-st / .fr-loop / .fr-clause / .fr-next).
   Every rule here is scoped to .bz or a .bz- class.
   The spine: the buyer's internal case — someone has to put their name behind the decision. The hero shows the
   memo empty, each chapter adds what the content gives them, and the end shows the memo complete and signed.
   Default CSS = the final, complete, visible state; one-shot pre-states only inside the no-preference block.
   Colour meanings: teal = what research-driven content answers · blue = the unanswered question. No gold.
   ========================================================================== */

.bz { --bz-paper: #F4F3EF; --bz-ink: #15191F; --bz-green: #0a7f73; }

/* ---------------------------------------------------------------- hero memo (paper inside the schematic) */
.bz .bp-paper { fill: var(--bz-paper); }
.bz .bp-ink { fill: #c9ccd1; } .bz .bp-mark { fill: var(--bz-green); }
.bz .bp-sign { fill: none; stroke: var(--bz-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- ch01 generic vs specific */
.bz-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; }
.bz-post { position: relative; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--fr-blue) 55%, transparent); background: rgba(52, 120, 212, .05); }
.bz-post b { display: block; margin: 6px 0 12px; color: var(--text); font: 400 1.3rem/1.2 var(--serif); }
.bz-post i { display: block; height: 9px; margin-top: 8px; border-radius: 5px; background: rgba(244, 243, 239, .14); }
.bz-post i:nth-of-type(2) { width: 82%; } .bz-post i:nth-of-type(3) { width: 64%; }
.bz-qs { display: grid; gap: 8px; }
.bz-qs .fr-box { position: relative; padding-left: 40px; }
.bz-qs .fr-box::before { content: '?'; position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #04201d; font: 700 11px/1 var(--mono); }
@media (max-width: 699px) { .bz-vs { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ch02 the buying group, the 71%, the internal conversation */
.bz-group { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bz-group .fr-box { padding-top: 14px; }
.bz-svc { margin: 16px auto 0; max-width: 420px; text-align: center; }
.bz-svc .fr-box { font: 400 1.2rem/1.3 var(--serif); }
.bz-stat { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.bz-ring { position: relative; width: 170px; height: 170px; }
.bz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bz-ring .rg-t { fill: none; stroke: rgba(244, 243, 239, .1); stroke-width: 12; }
.bz-ring .rg-v { fill: none; stroke: var(--teal); stroke-width: 12; stroke-linecap: round; stroke-dasharray: .71 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(25, 230, 207, .5)); }
.bz-ring b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font: 400 2.6rem/1 var(--serif); }
.bz-stat p { max-width: none; margin: 0; color: var(--text); font: 400 1.2rem/1.4 var(--serif); }
.bz-stat small { display: block; margin-top: 10px; color: var(--text2); font: 500 max(.62rem, 11px)/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bz-say { margin: 20px 0 1.6em; padding: 18px 20px; background: var(--bz-paper); color: var(--bz-ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .4); }
.bz-say .fr-lab { color: #3a4049; margin-bottom: 8px; }
.bz-say ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bz-say li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; font: 400 1.15rem/1.35 var(--serif); }
.bz-say li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--bz-green); transform: translateY(-1px); }
@media (max-width: 699px) { .bz-group { grid-template-columns: 1fr; } .bz-stat { grid-template-columns: 1fr; justify-items: start; } .bz-ring { width: 140px; height: 140px; } }

/* ---------------------------------------------------------------- ch03 research → map → content */
.bz-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bz-pipe > div { position: relative; display: grid; align-content: start; gap: 6px; }
.bz-pipe > div + div::before { content: ''; position: absolute; left: -12px; top: 26px; width: 12px; height: 1.5px; background: var(--teal); }
.bz-pipe .fr-box { font-size: .92rem; padding: 8px 10px; }
.bz-entry { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bz-entry > div { position: relative; padding: 10px; border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); background: rgba(16, 35, 42, .5); text-align: center; color: var(--text); font: 400 1.05rem/1.2 var(--serif); }
.bz-entry > div + div::before { content: ''; position: absolute; left: -10px; top: 50%; width: 10px; height: 1.5px; background: var(--teal); }
.bz-entry > div:first-child { border-color: color-mix(in srgb, var(--fr-blue) 60%, transparent); border-style: dashed; background: rgba(52, 120, 212, .06); }
.bz-turns { display: grid; gap: 10px; }
.bz-turn { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.4fr); gap: 10px; align-items: center; }
.bz-turn > s { color: var(--text2); text-decoration-color: var(--fr-blue); font: 400 1.15rem/1.3 var(--serif); }
.bz-turn > i { height: 1.5px; background: var(--teal); position: relative; }
.bz-turn > i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
.bz-fmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bz-fmt .fr-box { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.bz-fmt svg { width: 40px; height: 40px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bz .oa-tw .oa-t td:last-child { color: var(--accent-t); }
.bz .oa-t tbody tr { transition: background .3s; }
.bz .oa-t tbody tr:hover { background: rgba(25, 230, 207, .05); }
@media (max-width: 899px) { .bz-pipe { grid-template-columns: 1fr 1fr; } .bz-pipe > div:nth-child(3)::before { display: none; } .bz-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bz-entry > div:nth-child(4)::before { display: none; } }
@media (max-width: 599px) { .bz-pipe, .bz-fmt { grid-template-columns: 1fr; } .bz-pipe > div::before { display: none; } .bz-entry { grid-template-columns: 1fr 1fr; } .bz-entry > div:nth-child(odd)::before { display: none; } .bz-turn { grid-template-columns: 1fr; } .bz-turn > i { transform: rotate(90deg); width: 26px; justify-self: center; margin: 6px 0; } }

/* ---------------------------------------------------------------- ch04 where your time goes */
.bz-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bz-steps > div { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--line); background: rgba(11, 13, 16, .85); color: var(--text); line-height: 1.4; font-size: .96rem; }
.bz-steps > div.is-you { border-color: rgba(244, 243, 239, .55); background: rgba(244, 243, 239, .06); }
.bz-steps .bz-who { justify-self: start; padding: 3px 8px; font: 500 max(.62rem, 11px)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); color: var(--accent-t); }
.bz-steps .is-you .bz-who { border-color: rgba(244, 243, 239, .6); color: var(--text); }
.bz-meter { display: flex; gap: 4px; margin-top: auto; }
.bz-meter i { flex: 1; height: 5px; border-radius: 3px; background: rgba(244, 243, 239, .1); }
.bz-meter i.on { background: var(--text); }
@media (max-width: 799px) { .bz-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 499px) { .bz-steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ch05 one month of the Full Content Plan */
.bz-month { display: grid; gap: 12px; }
.bz-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bz-row > span { color: var(--text); font: 400 1.12rem/1.25 var(--serif); }
.bz-row > span small { display: block; margin-top: 3px; color: var(--text2); font: 500 max(.62rem, 11px)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bz-toks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bz-toks i { display: block; flex: none; }
.bz-toks.is-reel i { width: 14px; height: 24px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 6px rgba(25, 230, 207, .35); }
.bz-toks.is-car i { width: 22px; height: 22px; border-radius: 3px; background: rgba(25, 230, 207, .55); box-shadow: 4px -4px 0 -1px rgba(25, 230, 207, .25); }
.bz-toks.is-story i { width: 13px; height: 13px; border-radius: 50%; background: rgba(25, 230, 207, .8); }
.bz-toks.is-prompt i { width: 22px; height: 22px; border-radius: 3px; border: 1.5px dashed rgba(244, 243, 239, .7); }
.bz-toks.is-call i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--text); position: relative; }
.bz-toks.is-call i::after { content: ''; position: absolute; left: 11px; top: 5px; width: 1.5px; height: 9px; background: var(--text); box-shadow: 3px 7px 0 0 transparent; transform-origin: bottom; }
.bz-toks.is-fb i { width: 26px; height: 20px; border-radius: 4px 4px 4px 0; border: 1.5px solid var(--text); }
.bz-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 699px) { .bz-row { grid-template-columns: 1fr; gap: 8px; } .bz-moments { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ch06 the review conversation */
.bz-review { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1.2fr) 30px minmax(0, .8fr); gap: 8px; align-items: center; }
.bz-review > div { display: grid; gap: 8px; }
.bz-review > i { height: 1.5px; background: var(--teal); position: relative; }
.bz-review > i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
.bz-next { padding: 16px; border: 1.5px solid var(--teal); background: rgba(16, 35, 42, .65); color: var(--text); font: 400 1.25rem/1.25 var(--serif); text-align: center; box-shadow: 0 0 26px rgba(25, 230, 207, .14); }
.bz-next::after { content: '\21BA'; content: '\21BA' / ''; display: block; margin-top: 6px; color: var(--teal); font: 400 1.6rem/1 var(--sans); }
.bz-reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bz-dots { position: relative; height: 120px; border: 1px solid var(--line); background: radial-gradient(circle, rgba(244, 243, 239, .2) 1.2px, transparent 1.6px) 0 0 / 14px 14px; overflow: hidden; }
.bz-dots b { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, var(--teal) 2.4px, transparent 3px) 0 0 / 11px 11px; border: 1.5px solid var(--teal); box-shadow: 0 0 22px rgba(25, 230, 207, .45); }
@media (max-width: 799px) { .bz-review { grid-template-columns: 1fr; } .bz-review > i { transform: rotate(90deg); width: 26px; justify-self: center; margin: 6px 0; } .bz-reach { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ch07 who this fits, and what they need to believe */
.bz-ind { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-ind span { padding: 6px 11px; border: 1px solid var(--line2); color: var(--text); font-size: .92rem; line-height: 1.3; }
.bz-ind span.is-t { border-color: color-mix(in srgb, var(--teal) 60%, transparent); background: rgba(16, 35, 42, .55); }
.bz-belief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 699px) { .bz-belief { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- finale: the internal case, complete */
.bz-memo { position: relative; width: min(760px, 100vw - 32px); margin: 40px auto 0; padding: 30px clamp(18px, 4vw, 44px) 30px; background: var(--bz-paper); color: var(--bz-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(25, 230, 207, .3); }
.bz-memo-h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--bz-ink); font: 500 max(.62rem, 11px)/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #3a4049; }
.bz-memo-h::before { content: attr(data-l); } .bz-memo-h::after { content: attr(data-r); text-align: right; }
.bz-memo dl { margin: 0; }
.bz-memo dl > div { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(21, 25, 31, .14); }
.bz-memo dt { font: 600 max(.64rem, 11px)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bz-green); }
.bz-memo dd { margin: 0; font: 400 1.18rem/1.35 var(--serif); }
.bz-memo-sign { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-top: 22px; }
.bz-memo-sign svg { width: 220px; height: 60px; overflow: visible; }
.bz-memo-sign .bz-sig { fill: none; stroke: var(--bz-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bz-memo-sign .bz-sigl { padding-top: 8px; border-top: 1.5px solid var(--bz-ink); font: 500 max(.62rem, 11px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #3a4049; }
.bz-memo-sign .bz-stamp { padding: 8px 12px; border: 2px solid var(--bz-green); color: var(--bz-green); font: 700 max(.7rem, 11px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-4deg); }
@media (max-width: 599px) { .bz-memo dl > div { grid-template-columns: 1fr; gap: 4px; } .bz-memo-sign { grid-template-columns: 1fr; } .bz-memo-sign svg { width: 180px; } .bz-memo-sign .bz-stamp { justify-self: start; } }

/* sources */
.bz-src { width: var(--col); margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }
.bz-src h2 { margin-bottom: 10px; color: var(--text); font: 400 1.4rem/1.2 var(--serif); }
.bz-src p { max-width: none; margin: 0 0 10px; color: var(--text2); font-size: .92rem; line-height: 1.55; }
.bz-src a { color: var(--text2); text-decoration: underline 1px var(--line2); text-underline-offset: 3px; }

/* ==========================================================================
   Motion: one-shot on first view, never loops (staged reveals come from fire.css's .fr-st).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.ready .bz .res-plate:not(.in) .bp-path, html.ready .bz .res-plate:not(.in) .bp-sign { stroke-dashoffset: 1; }
  html.ready .bz .res-plate:not(.in) .bp-step { opacity: .25; }
  .bz .res-plate .bp-path { transition: stroke-dashoffset 2.2s var(--ease) .5s; }
  .bz .res-plate .bp-sign { transition: stroke-dashoffset 1.2s var(--ease) 2.6s; }
  .bz .res-plate .bp-step { transition: opacity .6s var(--ease) calc(var(--k, 0) * .55s + .3s); }

  html.ready .bz-stat:not(.in) .rg-v { stroke-dasharray: 0 1; }
  .bz-stat .rg-v { transition: stroke-dasharray 1.8s var(--ease) .3s; }

  html.ready .bz-month:not(.in) .bz-toks i { opacity: .1; transform: scale(.5); }
  .bz-month .bz-toks i { transition: opacity .25s var(--ease) calc(var(--r) * .35s + var(--i) * .035s + .2s), transform .25s var(--ease) calc(var(--r) * .35s + var(--i) * .035s + .2s); }

  html.ready .bz-memo:not(.in) dd { opacity: .3; }
  html.ready .bz-memo:not(.in) .bz-sig { stroke-dashoffset: 1; }
  html.ready .bz-memo:not(.in) .bz-stamp { opacity: 0; transform: rotate(-4deg) scale(1.6); }
  .bz-memo dd { transition: opacity .5s var(--ease) calc(var(--k) * .35s + .3s); }
  .bz-memo .bz-sig { transition: stroke-dashoffset 1.4s var(--ease) 1.9s; }
  .bz-memo .bz-stamp { transition: opacity .35s var(--ease) 3.2s, transform .45s cubic-bezier(.3, 1.6, .5, 1) 3.2s; }
}