.f-bn {
  --f-bn-pad: clamp(16px, 4vw, 48px);
  padding: clamp(56px, 7vw, 96px) var(--f-bn-pad);
  --f-bn-dur: 0.52s;
  --f-bn-curve: var(--f-ease);
}
.f-bn-inner { width: min(1200px, 100%); margin-inline: auto; }
.f-bn-light {
  background: var(--brand-bg, #FCFCFC);
  color: var(--brand-ink, #333);
  --f-bn-ink: var(--brand-ink-strong, #1A1A1A);
  --f-bn-body: var(--brand-ink, #333);
  --f-bn-quiet: var(--f-quiet-ink);
  --f-bn-rule: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 87%);
  --f-bn-rule-soft: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 92%);
  --f-bn-field-a: color-mix(in oklab, var(--brand-bg, #FCFCFC), black 1.5%);
  --f-bn-field: color-mix(in oklab, var(--brand-bg, #FCFCFC), black 6%);
  --f-bn-accent: var(--f-accent-ink, var(--brand-accent, #0074C8));
  --f-bn-mark: var(--brand-accent, #0074C8);
}
.f-bn-dark {
  background: var(--brand-surface-dark, #1A1A1A);
  color: var(--brand-ink-on-dark, #FCFCFC);
  --f-bn-ink: var(--brand-ink-on-dark, #FCFCFC);
  --f-bn-body: rgba(255, 255, 255, 0.86);
  --f-bn-quiet: rgba(255, 255, 255, 0.62);
  --f-bn-rule: rgba(255, 255, 255, 0.16);
  --f-bn-rule-soft: rgba(255, 255, 255, 0.09);
  --f-bn-field-a: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), white 2%);
  --f-bn-field: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), white 8%);
  --f-bn-accent: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
  --f-bn-mark: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
}
.f-bn h2:not(.f-bn-title), .f-bn h3:not(.f-bn-title) { color: inherit; }
.f-bn-head { max-width: var(--f-measure-wide); margin-bottom: clamp(28px, 3.5vw, 44px); }
.f-bn-kicker {
  margin: 0 0 var(--f-space-xs);
  font-size: var(--f-text-caption);
  letter-spacing: var(--f-track-eyebrow);
  text-transform: uppercase;
  color: var(--f-bn-accent);
}
.f-bn-title { margin: 0; color: var(--f-bn-ink); }
.f-bn-intro {
  margin: var(--f-space-s) 0 0;
  font-size: var(--f-text-lead);
  line-height: var(--f-lh-body);
  color: var(--f-bn-quiet);
  max-width: var(--f-measure);
}
.f-bn-switch { display: none; }
.f-bn-live .f-bn-switch {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 40px);
  margin-bottom: clamp(28px, 3.6vw, 48px);
  padding-bottom: 12px;
}
.f-bn-switch::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--f-bn-rule);
}
.f-bn-tab {
  appearance: none;
  margin: 0; padding: 0 2px 2px;
  border: 0; background: none;
  font-family: var(--brand-font-display, inherit);
  font-weight: 700;
  text-transform: var(--brand-display-transform, none);
  font-size: var(--f-h4);
  line-height: var(--f-lh-h4);
  letter-spacing: var(--f-track-h3);
  color: var(--f-bn-quiet);
  cursor: pointer;
  transition: color 0.28s var(--f-bn-curve);
}
.f-bn-tab:hover { color: var(--f-bn-ink); }
.f-bn-tab[aria-pressed="true"] { color: var(--f-bn-ink); }
.f-bn-ind {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: var(--w, 0px);
  background: var(--f-bn-mark);
  translate: var(--x, 0px) 0;
  transition: translate var(--f-bn-dur) var(--f-bn-curve),
              width var(--f-bn-dur) var(--f-bn-curve);
}
.f-bn-panel { min-width: 0; }
.f-bn-panel + .f-bn-panel { margin-top: clamp(40px, 5vw, 72px); }
.f-bn-live .f-bn-panel + .f-bn-panel { margin-top: 0; }
.f-bn-live .f-bn-panel.is-off { display: none; }
.f-bn-glabel {
  margin: 0 0 var(--f-space-s);
  font-size: var(--f-h4);
  color: var(--f-bn-ink);
}
.f-bn-live .f-bn-glabel,
.f-bn-single .f-bn-glabel,
.f-bn-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}
@media (prefers-reduced-motion: no-preference) {
  .f-bn-live .f-bn-panel.is-in { animation: f-bn-wipe var(--f-bn-dur) var(--f-bn-curve) both; }
}
@keyframes f-bn-wipe {
  from { clip-path: inset(0 var(--wr, 0%) 0 var(--wl, 100%)); opacity: 0; translate: var(--dx, -20px) 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; translate: 0 0; }
}
.f-bn-list { list-style: none; margin: 0; padding: 0; }
.f-bn-foot { margin-top: clamp(36px, 4.5vw, 56px); }
.f-bn-icon {
  display: block;
  width: 56px; height: 56px;
  color: var(--f-bn-mark);
  flex: none;
}
.f-bn-icon svg { width: 100%; height: 100%; display: block; }
.f-bn-body {
  margin: 0;
  color: var(--f-bn-body);
  max-width: 46ch;
}
.f-bn-proof {
  margin: var(--f-space-s) 0 0;
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
  color: var(--f-bn-quiet);
  max-width: 46ch;
}
.f-bn-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 9fr);
  gap: clamp(16px, 3vw, 56px);
  padding: clamp(24px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--f-bn-rule);
}
.f-bn-rule {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 2px;
  background: var(--f-bn-mark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--f-bn-curve);
}
.f-bn-row:hover .f-bn-rule,
.f-bn-row:focus-within .f-bn-rule {
  transform: scaleX(1);
  transform-origin: left;
}
.f-bn-row-t {
  display: grid;
  gap: var(--f-space-xs);
  justify-items: start;
  margin: 0;
  font-size: var(--f-h3);
  line-height: var(--f-lh-h3);
  color: var(--f-bn-ink);
  transition: translate 0.45s var(--f-bn-curve);
}
.f-bn-row:hover .f-bn-row-t { translate: 6px 0; }
.f-bn-row-c { min-width: 0; }
@media (max-width: 760px) {
  .f-bn-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .f-bn-ind, .f-bn-rule, .f-bn-row-t, .f-bn-tab { transition: none !important; }
}