/* sections.css: the section system distilled from "What the agent reads" (Home #agents).
 *
 * One source for section rhythm, the title + paragraph header, muted cards, white panels,
 * the hover lift and the scroll reveal, shared by the home page and the use-case pages.
 * New class names (bz-*) so the reference section's own .uc-* rules stay untouched.
 * Linked with a ?v= query: Vercel serves /partials/* as immutable, so bump it on change.
 */
:root {
  --bz-section-y: 120px; --bz-head-gap: 56px; --bz-gap: 16px;
  --bz-title: clamp(24px, 3.6vw, 52px);
  --bz-r-card: 24px; --bz-r-panel: 16px; --bz-r-tile: 10px;
  --bz-shadow-panel: 0 12px 32px rgba(0, 0, 0, .08);
  --bz-shadow-panel-lg: 0 20px 50px rgba(0, 0, 0, .10);
  --bz-shadow-lift: 0 12px 28px oklch(0.14 0 0 / .12);
  --bz-shadow-cta: 0 12px 24px -10px rgba(0, 0, 0, .25);
  --bz-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --bz-out: cubic-bezier(.16, 1, .3, 1);
}
.bz-section { padding: var(--bz-section-y) 0; background: var(--background); }
.bz-section--alt { background: var(--surface-secondary); }

/* header: title left, grey paragraph right, its first line level with the title's last */
.bz-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: var(--bz-head-gap); }
.bz-head--solo { grid-template-columns: 1fr; }
.bz-title { margin: 0; font-family: var(--font-heading); font-size: var(--bz-title); font-weight: 500;
  line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--text-primary); text-wrap: balance; }
/* style="--bz-title-lines: 2" (or 3) on .bz-head when the title wraps; 1 = the reference's 54px */
.bz-para { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--text-secondary);
  padding-top: calc(var(--bz-title-lines, 1) * 1.1 * var(--bz-title) - 3px); }

.bz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bz-gap); }
.bz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-grid + .bz-grid { margin-top: var(--bz-gap); }

/* cards lift with `translate`, so the lift never fights a reveal's `transform` */
.bz-card { background: var(--muted); border-radius: var(--bz-r-card); overflow: hidden; transition: translate .25s ease; }
.bz-card:hover { translate: 0 -2px; }
.bz-card--lg { display: flex; flex-direction: column; min-height: 480px; }
.bz-card-viz { position: relative; flex: 1; min-height: 320px; padding: 28px; display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.bz-card-body { padding: 24px 28px 28px; }
.bz-card--sm { padding: 26px 28px 28px; }
.bz-card-body h3, .bz-card--sm > h3 { margin: 0 0 6px; font-size: 19px; font-weight: 500; letter-spacing: -0.3px;
  line-height: 1.3; color: var(--text-primary); }
.bz-card--sm > h3 { font-size: 16.5px; letter-spacing: -0.2px; }
.bz-icon + h3 { margin-top: 36px; }
.bz-card-body p, .bz-card--sm > p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.bz-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--bz-r-tile);
  background: var(--background); border: 1px solid var(--surface-border); color: var(--text-primary); }
.bz-icon svg { width: 18px; height: 18px; }

/* the white product panel inside a muted card */
.bz-panel { width: min(440px, 100%); padding: 20px; background: var(--background);
  border: 1px solid var(--surface-border); border-radius: var(--bz-r-panel); box-shadow: var(--bz-shadow-panel); }
.bz-bar { height: 4px; border-radius: 9999px; background: var(--surface-subtle); overflow: hidden; }
.bz-bar > i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--text-primary); }
.bz-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--surface-subtle);
  font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.bz-cap { font-size: 11px; color: var(--text-tertiary); }

/* scroll reveal, the same motion as the story's .zs-fade */
.js .rv { opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .8s var(--bz-out), translate .25s ease; }
.js .rv.in, .js .rv.is-in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .bz-head { grid-template-columns: 1fr; gap: 12px; }
  .bz-para { padding-top: 0; }
  .bz-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { .bz-title { letter-spacing: -0.02em; } }
@media (max-width: 600px) {
  :root { --bz-section-y: 56px; --bz-head-gap: 32px; }
  .bz-grid { grid-template-columns: 1fr; }
  .bz-card--lg { min-height: 320px; }
  .bz-card-viz { min-height: 200px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-card, .js .rv { transition: none; }
  .bz-card:hover { translate: none; }
  .js .rv { opacity: 1; transform: none; }
}