/* Diagram positions and sizes scale with the original canvas via container units. */
.bf-figwrap { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); container-type: inline-size; overflow: hidden; }
.bf-figwrap > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bf-layer { position: absolute; inset: 0; pointer-events: none; font-family: Manrope, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif; }

.bf-lbl {
  position: absolute; white-space: nowrap; line-height: 1;
  font-size: calc(var(--fs, 14) * 100cqw / var(--w));
  color: var(--ink-hi); font-weight: var(--fw, 500);
  transform: translate(-50%, -50%);
}
.bf-lbl.is-start { transform: translate(0, -50%); }
.bf-lbl.is-end { transform: translate(-100%, -50%); }
.bf-lbl.is-dim { color: var(--ink-mid); }
.bf-lbl.is-low { color: var(--ink-low); }
.bf-lbl.is-brand { color: var(--brand); }
.bf-lbl.is-on-accent { color: var(--ink-on-accent); }
.bf-lbl.is-ultra { color: var(--bf-tier-ultra); }
.bf-lbl.is-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.bf-ico {
  position: absolute; display: block;
  width: calc(var(--s, 24) * 100cqw / var(--w)); height: calc(var(--s, 24) * 100cqw / var(--w));
  transform: translate(-50%, -50%);
  background: currentColor; color: var(--icon-idle);

  /* Inline --ico URLs resolve relative to the HTML document. */
  -webkit-mask: var(--ico) center / contain no-repeat;  mask: var(--ico) center / contain no-repeat;
}
.bf-ico.is-brand { color: var(--brand); }
.bf-ico.is-hi { color: var(--ink-hi); }
.bf-ico.is-dim { color: var(--icon-dim); }
.bf-ico.is-on-accent { color: var(--ink-on-accent); }
.bf-ico.is-flip { transform: translate(-50%, -50%) scaleX(-1); }

.bf-pill {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: calc(6 * 100cqw / var(--w));
  height: calc(var(--ph, 40) * 100cqw / var(--w)); padding: 0 calc(var(--px, 16) * 100cqw / var(--w));
  border-radius: var(--r-pill); background: var(--brand); color: var(--ink-on-accent);
  font-size: calc(var(--fs, 16) * 100cqw / var(--w)); font-weight: 600; white-space: nowrap;
}
.bf-pill .bf-ico { position: static; transform: none; color: inherit; }
.bf-pill.is-ghost { background: var(--brand-glow); color: var(--brand); }
.bf-pill.is-dark { background: var(--raise); color: var(--ink-hi); }

.bf-hero-real {
  border-radius: calc(var(--r-sheet) + 10px); overflow: hidden;
  padding: calc(var(--space-4) + var(--space-1));
  background: var(--ink-on-accent);
  border: var(--hairline-w) solid var(--raise);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 90px var(--brand-glow);
}
.bf-hero-real img { display: block; width: 100%; height: auto; border-radius: var(--r-field); }

.bf-prices .prices__table { grid-template-rows: none !important; }