
.f-bu {
  --f-bu-pad: clamp(16px, 4vw, 48px);
  padding: clamp(56px, 7vw, 96px) var(--f-bu-pad);
  --f-bu-curve: var(--f-ease);
}
.f-bu-join-previous { padding-top: var(--f-space-m); }
@media (max-width: 719px) {
  .f-bu-join-previous { padding-top: var(--f-space-s); }
}
.f-bu-inner { width: min(1200px, 100%); margin-inline: auto; }
.f-bu-light {
  background: var(--brand-bg, #FCFCFC);
  color: var(--brand-ink, #333);
  --f-bu-ink: var(--brand-ink-strong, #1A1A1A);
  --f-bu-body: var(--brand-ink, #333);
  --f-bu-quiet: var(--f-quiet-ink);
  --f-bu-ghost: rgba(0, 0, 0, 0.30);
  --f-bu-rule: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 87%);
  --f-bu-field: color-mix(in oklab, var(--brand-bg, #FCFCFC), black 4.5%);
  --f-bu-accent: var(--f-accent-ink, var(--brand-accent, #0074C8));
  --f-bu-mark: var(--brand-accent, #0074C8);
}
.f-bu-dark {
  background: var(--brand-surface-dark, #1A1A1A);
  color: var(--brand-ink-on-dark, #FCFCFC);
  --f-bu-ink: var(--brand-ink-on-dark, #FCFCFC);
  --f-bu-body: rgba(255, 255, 255, 0.86);
  --f-bu-quiet: rgba(255, 255, 255, 0.62);
  --f-bu-ghost: rgba(255, 255, 255, 0.32);
  --f-bu-rule: rgba(255, 255, 255, 0.16);
  --f-bu-field: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), white 6%);
  --f-bu-accent: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
  --f-bu-mark: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
}
.f-bu h2:not(.f-bu-title) { color: inherit; }
.f-bu-head { max-width: var(--f-measure-wide); margin-bottom: clamp(28px, 3.5vw, 44px); }
.f-bu-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-bu-accent);
}
.f-bu-title { margin: 0; color: var(--f-bu-ink); }
.f-bu-intro {
  margin: var(--f-space-s) 0 0;
  font-size: var(--f-text-lead);
  line-height: var(--f-lh-body);
  color: var(--f-bu-quiet);
  max-width: var(--f-measure);
}
.f-bu-list { list-style: none; margin: 0; padding: 0; }
.f-bu-foot { margin-top: clamp(36px, 4.5vw, 56px); }
.f-bu-tick { display: block; width: 100%; height: 100%; }
.f-bu-claim { color: var(--f-bu-ink); }
.f-bu-body { margin: 0; color: var(--f-bu-body); max-width: 52ch; }
.f-bu-media-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.f-bu-media-right .f-bu-media-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
}
.f-bu-media-frame { margin: 0; min-width: 0; }
.f-bu-media-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  border-radius: 12px;
}
.f-bu-media-caption {
  margin: var(--f-space-xs) 0 0;
  padding-top: var(--f-space-xs);
  border-top: 1px solid var(--f-bu-rule);
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
  color: var(--f-bu-quiet);
}
.f-bu-media-right .f-bu-media-frame { order: 2; }
.f-bu-has-media .f-bu-head { margin-bottom: clamp(24px, 3vw, 36px); }
.f-bu-has-media.f-bu-tally .f-bu-list { max-width: none; }
@media (max-width: 820px) {
  .f-bu-media-layout,
  .f-bu-media-right .f-bu-media-layout {
    grid-template-columns: 1fr;
    gap: clamp(32px, 8vw, 48px);
  }
  .f-bu-media-right .f-bu-media-frame { order: 0; }
  .f-bu-media-frame { width: min(100%, 440px); margin-inline: auto; }
  .f-bu-media-img { max-height: 560px; }
  .f-bu-has-media .f-bu-title + .f-bu-intro { margin-top: var(--f-space-m); }
  #more-than-one .f-bu-media-layout { gap: clamp(52px, 14vw, 72px); }
}
.f-bu-ticks .f-bu-list,
.f-bu-field .f-bu-list,
.f-bu-tally .f-bu-list {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  max-width: var(--f-measure-wide);
}
.f-bu-ticks .f-bu-item,
.f-bu-field .f-bu-item,
.f-bu-tally .f-bu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 2vw, 20px);
}
.f-bu-mark {
  width: 24px; height: 24px;
  margin-top: 3px;
  color: var(--f-bu-mark);
}
.f-bu-ticks .f-bu-claim,
.f-bu-field .f-bu-claim,
.f-bu-tally .f-bu-claim {
  display: block;
  font-size: var(--f-text-lead);
  line-height: 1.45;
  font-weight: 700;
}
.f-bu-ticks .f-bu-body,
.f-bu-field .f-bu-body,
.f-bu-tally .f-bu-body { margin-top: 4px; }
.f-bu-field .f-bu-head {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding-left: clamp(28px, 5vw, 56px);
}
.f-bu-box {
  background: var(--f-bu-field);
  border-radius: 6px;
  padding: clamp(28px, 5vw, 56px);
  margin-top: calc(var(--f-h2) * -0.55);
  padding-top: calc(clamp(28px, 5vw, 56px) + var(--f-h2) * 0.75);
}
.f-bu-box:first-child { margin-top: 0; padding-top: clamp(28px, 5vw, 56px); }
.f-bu-boxintro { margin: 0 0 clamp(22px, 3vw, 34px); }
@media (min-width: 860px) {
  .f-bu-field .f-bu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 72px);
    max-width: none;
  }
}
@property --f-bu-done {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.f-bu-tally .f-bu-claim {
  color: color-mix(in oklab, var(--f-bu-ink) calc(var(--f-bu-done) * 100%), var(--f-bu-ghost));
}
.f-bu-tally .f-bu-mark .f-bu-tick path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--f-bu-done));
}
.f-bu-tally .f-bu-mark {
  color: color-mix(in oklab, var(--f-bu-mark) calc(40% + var(--f-bu-done) * 60%), transparent);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .f-bu-tally .f-bu-item {
      animation: f-bu-check linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
  }
}
@keyframes f-bu-check {
  from { --f-bu-done: 0; }
  to   { --f-bu-done: 1; }
}
.f-bu-spine .f-bu-list { --f-bu-gap: clamp(32px, 4.5vw, 64px); }
.f-bu-spine .f-bu-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--f-bu-gap);
  padding-block: clamp(14px, 2vw, 24px);
}
.f-bu-spine .f-bu-item::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc((100% - var(--f-bu-gap)) * 5 / 12 + var(--f-bu-gap) / 2);
  width: 1px;
  background: var(--f-bu-rule);
}
.f-bu-spine .f-bu-seg {
  position: absolute;
  top: 0; bottom: 0;
  left: calc((100% - var(--f-bu-gap)) * 5 / 12 + var(--f-bu-gap) / 2 - 0.5px);
  width: 2px;
  background: var(--f-bu-mark);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--f-bu-curve);
}
.f-bu-spine .f-bu-item:hover .f-bu-seg,
.f-bu-spine .f-bu-item:focus-within .f-bu-seg {
  transform: scaleY(1);
  transform-origin: top;
}
.f-bu-spine .f-bu-claim {
  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);
  text-align: right;
  align-self: start;
  text-wrap: balance;
}
.f-bu-spine .f-bu-body { align-self: center; max-width: 46ch; }
@media (max-width: 719px) {
  .f-bu-spine .f-bu-item { grid-template-columns: 1fr; row-gap: 6px; padding-left: 22px; }
  .f-bu-spine .f-bu-item::before,
  .f-bu-spine .f-bu-seg { left: 0; }
  .f-bu-spine .f-bu-claim { text-align: left; }
}
.f-bu-dashes .f-bu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 4.5vw, 52px) clamp(28px, 4vw, 56px);
}
.f-bu-dashes .f-bu-item::before {
  content: "";
  display: block;
  width: 48px; height: 2px;
  margin-bottom: 14px;
  background: var(--f-bu-mark);
  transform: scaleX(0.58);
  transform-origin: left;
  transition: transform 0.4s var(--f-bu-curve);
}
.f-bu-dashes .f-bu-item:hover::before,
.f-bu-dashes .f-bu-item:focus-within::before { transform: scaleX(1); }
.f-bu-dashes .f-bu-claim {
  display: block;
  font-family: var(--brand-font-display, inherit);
  font-weight: 700;
  text-transform: var(--brand-display-transform, none);
  font-size: var(--f-h5);
  line-height: var(--f-lh-h5);
  margin-bottom: 6px;
  text-wrap: balance;
}
.f-bu-dashes .f-bu-body { font-size: var(--f-text-small); line-height: var(--f-lh-small); }
.f-bu-roster .f-bu-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--f-bu-rule);
}
.f-bu-roster .f-bu-item:first-child { padding-top: 0; }
.f-bu-roster .f-bu-rule {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 2px;
  background: var(--f-bu-mark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--f-bu-curve);
}
.f-bu-roster .f-bu-item:hover .f-bu-rule,
.f-bu-roster .f-bu-item:focus-within .f-bu-rule {
  transform: scaleX(1);
  transform-origin: left;
}
.f-bu-roster .f-bu-claim {
  font-family: var(--brand-font-display, inherit);
  font-weight: 700;
  text-transform: var(--brand-display-transform, none);
  font-size: var(--f-h2);
  line-height: var(--f-lh-h2);
  letter-spacing: var(--f-track-h2);
  transition: color 0.35s var(--f-bu-curve);
}
.f-bu-roster .f-bu-item:hover .f-bu-claim,
.f-bu-roster .f-bu-item:focus-within .f-bu-claim { color: var(--f-bu-accent); }
.f-bu-roster .f-bu-side {
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
  color: var(--f-bu-quiet);
  text-align: right;
  padding-bottom: 0.55em;
}
@media (max-width: 719px) {
  .f-bu-roster .f-bu-item { grid-template-columns: 1fr; row-gap: 2px; align-items: start; }
  .f-bu-roster .f-bu-side { text-align: left; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .f-bu-seg, .f-bu-rule, .f-bu-roster .f-bu-claim,
  .f-bu-dashes .f-bu-item::before { transition: none !important; }
}
