/* BFCM peak hour infographic. One side view of a store: traffic enters at the left, the site carries the load, and money leaves at the right. On a phone the flow runs from top to bottom. All rules are scoped to .bfcm. */
.bfcm {

  --screen: #0a0c19;
  --navy: #151632;
  --indigo: #302480;
  --line: #34365c;
  --text: #e9edf6;
  --muted: #a4a8c4;
  --traffic: #b9b0ff;
  --money: #9be2d2;
  --warn: #f3bf6b;
  --hot: #ff7d6e;
  --display: 'Oxanium', 'Manrope', sans-serif;
  --sans: 'Manrope', Arial, Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  color-scheme: dark;
  background-color: var(--screen);
  background-image:
    linear-gradient(rgba(185,176,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,176,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px));
  padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px));
}
.bfcm * { box-sizing: border-box; }
.bfcm .bf-page {
  max-width: 1320px;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 48px);
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.bfcm .bf-headline, .bfcm h2, .bfcm p, .bfcm ol, .bfcm ul, .bfcm dl, .bfcm dd { margin: 0; padding: 0; }
.bfcm ol, .bfcm ul { list-style: none; }
.bfcm a { color: var(--money); text-underline-offset: 3px; }
.bfcm :focus-visible { outline: 2px solid var(--money); outline-offset: 3px; }

.bfcm .bf-label {
  font: 500 .75rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Header */
.bfcm .bf-top { display: grid; gap: 20px; }
.bfcm .bf-topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}
.bfcm .bf-dates b { color: var(--text); font-weight: 500; }
.bfcm .bf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bfcm .bf-controls button {
  font: 500 .8125rem/1 var(--mono);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 10px 12px;
  min-height: 40px;
  cursor: pointer;
}
.bfcm .bf-controls button:hover { color: var(--text); border-color: var(--muted); }
.bfcm .bf-controls button[aria-pressed="true"] {
  color: var(--screen);
  background: var(--traffic);
  border-color: var(--traffic);
  font-weight: 500;
}
.bfcm .bf-headline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 48px;
  font: 800 clamp(2.25rem, 5.4vw, 5rem)/1 var(--display);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.bfcm .bf-headline .bf-in { color: var(--traffic); }
.bfcm .bf-headline .bf-out { color: var(--money); text-align: right; }

/* Scene */
.bfcm .bf-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
}
.bfcm .bf-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bfcm .bf-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.bfcm .bf-zone .bf-field { flex: 1; min-height: 300px; }
.bfcm .bf-zone header { display: grid; gap: 2px; }
.bfcm .bf-zone .bf-big {
  font: 700 clamp(1.75rem, 3vw, 2.625rem)/1.1 var(--display);
  font-variant-numeric: tabular-nums;
}
.bfcm .bf-zone .bf-key { font-size: .875rem; color: var(--muted); max-width: 30ch; }
.bfcm .bf-front .bf-big { color: var(--traffic); }
.bfcm .bf-front .bf-key b, .bfcm .bf-back .bf-big { color: var(--money); }
.bfcm .bf-front .bf-key b { font-weight: 700; }
.bfcm .bf-back { text-align: right; align-items: flex-end; }
.bfcm .bf-back header { justify-items: end; }
.bfcm .bf-back .bf-field { align-self: stretch; }
.bfcm .bf-front { padding-right: 0; }

.bfcm .bf-site {
  position: relative;
  z-index: 1;
  background: var(--navy);
  border: 2px solid var(--traffic);
  display: flex;
  flex-direction: column;
  transition: border-color .3s, box-shadow .3s;
}
.bfcm .bf-site[data-load="2"] {
  border-color: var(--hot);
  box-shadow: 0 0 0 6px rgba(255,125,110,.14), 0 0 64px rgba(255,125,110,.28);
}
/* The two doors sit on the window edges, at the center where the flows meet. */
.bfcm .bf-door {
  position: absolute;
  top: 32%;
  height: 36%;
  width: 8px;
  z-index: 2;
}
.bfcm .bf-door.bf-f { left: -5px; background: var(--traffic); }
.bfcm .bf-door.bf-b { right: -5px; background: var(--money); }

.bfcm .bf-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--screen);
}
.bfcm .bf-url {
  flex: 1;
  min-width: 0;
  font: 500 .8125rem/1.3 var(--mono);
  color: var(--text);
  overflow-wrap: anywhere;
}
.bfcm .bf-status {
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .04em;
  padding: 6px 8px;
  white-space: nowrap;
  color: var(--screen);
  background: var(--traffic);
}
.bfcm .bf-site[data-load="2"] .bf-status { background: var(--hot); }
.bfcm .bf-panel { padding: 16px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.bfcm .bf-panel:last-child { border-bottom: 0; }

.bfcm .bf-path { display: flex; flex-wrap: wrap; gap: 6px 4px; font: 500 .8125rem/1.5 var(--mono); }
.bfcm .bf-path li { display: flex; gap: 4px; }
.bfcm .bf-path li:not(:last-child)::after { content: "→"; color: var(--muted); }
.bfcm .bf-path .bf-pay { color: var(--money); font-weight: 500; }

.bfcm .bf-meters { display: grid; gap: 10px; }
.bfcm .bf-meter { display: grid; gap: 4px; }
.bfcm .bf-meter .bf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: .875rem;
}
.bfcm .bf-meter .bf-val {
  font: 500 .875rem/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bfcm .bf-meter .bf-chip {
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .05em;
  color: var(--screen);
  background: var(--hot);
  padding: 3px 5px;
  margin-right: 8px;
}
.bfcm .bf-bar { height: 10px; background: var(--screen); border: 1px solid var(--line); }
.bfcm .bf-bar i { display: block; height: 100%; background: var(--traffic); transition: width .4s ease, background-color .3s; }
.bfcm .bf-meter[data-state="warn"] .bf-bar i { background: var(--warn); }
.bfcm .bf-meter[data-state="warn"] .bf-val { color: var(--warn); }
.bfcm .bf-meter[data-state="hot"] .bf-bar i { background: var(--hot); }
.bfcm .bf-meter[data-state="hot"] .bf-val { color: var(--hot); }

.bfcm .bf-vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bfcm .bf-vitals dt { font: 500 .75rem/1.4 var(--mono); color: var(--muted); }
.bfcm .bf-vitals dd { font: 700 1.25rem/1.2 var(--display); font-variant-numeric: tabular-nums; }

/* Sum */
.bfcm .bf-sum {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 16px 24px;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  padding-block: 24px;
}
.bfcm .bf-term { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: end; }
.bfcm .bf-term .bf-op { grid-row: 1 / 3; align-self: center; font: 500 clamp(1.5rem, 2.6vw, 2.25rem)/1.15 var(--mono); color: var(--muted); }
.bfcm .bf-term.bf-sessions .bf-op { display: none; }
.bfcm .bf-term .bf-num {
  font: 800 clamp(2rem, 4.2vw, 3.75rem)/1.05 var(--display);
  font-variant-numeric: tabular-nums;
}
.bfcm .bf-term.bf-sessions .bf-num { color: var(--traffic); }
.bfcm .bf-term.bf-revenue .bf-num { color: var(--money); }
.bfcm .bf-risk { font-size: 1.125rem; max-width: 65ch; }
.bfcm .bf-risk b { color: var(--hot); font-weight: 700; font-variant-numeric: tabular-nums; }
.bfcm .bf-sumblock { display: grid; gap: 16px; }

/* Lower section */
.bfcm .bf-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.bfcm h2 {
  font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display);
  text-wrap: balance;
}
.bfcm .bf-block { display: grid; gap: 16px; }
.bfcm .bf-promise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  gap: 4px 20px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.bfcm .bf-promise b { font: 700 1.125rem/1.3 var(--display); color: var(--traffic); }
.bfcm .bf-promise p { grid-column: 1; font-size: .9375rem; color: var(--text); max-width: 56ch; }
.bfcm .bf-promise time {
  grid-column: 2;
  grid-row: 1 / 3;
  font: 500 .8125rem/1.5 var(--mono);
  color: var(--muted);
  text-align: right;
}

.bfcm .bf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.bfcm .bf-cal .bf-dow { font: 500 .6875rem/1.6 var(--mono); color: var(--muted); text-align: center; }
.bfcm .bf-cal .bf-d {
  aspect-ratio: 1.35;
  display: grid;
  place-items: center;
  font: 500 .875rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: rgba(21,22,50,.65);
}
.bfcm .bf-cal .bf-d.bf-m { color: var(--text); background: var(--indigo); font-weight: 500; }
.bfcm .bf-cal .bf-d.bf-bf { color: var(--screen); background: var(--hot); font-weight: 500; }
.bfcm .bf-cal .bf-d.bf-cm { color: var(--screen); background: var(--money); font-weight: 500; }
.bfcm .bf-cal .bf-d.bf-hol { color: var(--text); box-shadow: inset 0 0 0 1px var(--muted); }
.bfcm .bf-steps { display: grid; gap: 6px; font-size: .9375rem; }
.bfcm .bf-steps li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 10px; }
.bfcm .bf-steps time { font: 500 .8125rem/1.8 var(--mono); color: var(--traffic); }
.bfcm .bf-steps li.bf-bf time { color: var(--hot); }
.bfcm .bf-steps li.bf-cm time { color: var(--money); }
.bfcm .bf-steps li.bf-bf span, .bfcm .bf-steps li.bf-cm span { font-weight: 700; }

.bfcm .bf-foot {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: .875rem;
  color: var(--muted);
}
.bfcm .bf-foot p { max-width: 90ch; }
.bfcm .bf-brand { font: 700 1.125rem/1.2 var(--display); color: var(--text); }

@media (max-width: 880px) {
  .bfcm .bf-headline { grid-template-columns: 1fr; }
  .bfcm .bf-headline .bf-out { text-align: left; }
  .bfcm .bf-scene { grid-template-columns: minmax(0, 1fr); }
  .bfcm .bf-zone .bf-field { min-height: 260px; }
  .bfcm .bf-back { text-align: left; align-items: stretch; }
  .bfcm .bf-back header { justify-items: start; }
  .bfcm .bf-back { flex-direction: column-reverse; }
  .bfcm .bf-door { top: auto; width: 36%; height: 8px; left: 32%; right: auto; }
  .bfcm .bf-door.bf-f { top: -5px; left: 32%; }
  .bfcm .bf-door.bf-b { bottom: -5px; left: 32%; right: auto; }
  .bfcm .bf-lower { grid-template-columns: minmax(0, 1fr); }
  .bfcm .bf-sum { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bfcm .bf-term { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: baseline; }
  .bfcm .bf-term .bf-op { grid-row: auto; }
  .bfcm .bf-term .bf-label { grid-column: 2; grid-row: 1; }
  .bfcm .bf-term .bf-num { grid-column: 3; grid-row: 1; text-align: right; font-size: 1.75rem; }
  .bfcm .bf-term.bf-revenue .bf-num { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bfcm .bf-bar i, .bfcm .bf-site { transition: none; }
}
@media (min-width: 881px) {
  .bfcm .bf-term.bf-sessions { grid-template-columns: minmax(0, 1fr); }
}

.bfcm .bf-intro { display: grid; gap: 6px; }
.bfcm .bf-intro p { max-width: 65ch; color: var(--muted); }
.bfcm .bf-render-only { display: none; }
.bfcm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Checklist CTA. The border and the glow share one rotating conic gradient. Without @property the gradient stays still. */
@property --bf-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
.bfcm-actions { padding-top: 12px; }
.bfcm-actions .bfcm-cta {
  --bf-ring: conic-gradient(from var(--bf-angle), #b9b0ff, #9be2d2, #ff7d6e, #f3bf6b, #b9b0ff);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  max-width: 100%;
  padding: clamp(24px, 2.6vw, 38px) clamp(30px, 4.2vw, 64px);
  color: #fff;
  font: 700 clamp(1.5rem, 1.05rem + 2.2vw, 2.75rem)/1.1 'Oxanium', 'Manrope', sans-serif;
  text-decoration: none;
  animation: bf-ring-spin 4s linear infinite;
}
.bfcm-actions .bfcm-cta::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  border-radius: 14px;
  background: var(--bf-ring);
  filter: blur(18px);
  opacity: .75;
  transition: opacity .2s;
}
.bfcm-actions .bfcm-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 4px solid transparent;
  border-radius: 6px;
  background: linear-gradient(#302480, #302480) padding-box, var(--bf-ring) border-box;
}
.bfcm-actions .bfcm-cta:hover { color: #fff; }
.bfcm-actions .bfcm-cta:hover::before { opacity: 1; }
.bfcm-actions .bfcm-cta:focus-visible { outline: 3px solid #1a1b29; outline-offset: 6px; }
@keyframes bf-ring-spin { to { --bf-angle: 360deg; } }

/* Headline gradient. The PNG render uses reduced motion, so it keeps the flat colors. */
@media (prefers-reduced-motion: no-preference) {
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .bfcm .bf-headline .bf-in,
    .bfcm .bf-headline .bf-out {
      padding-bottom: .14em;
      background: linear-gradient(90deg, var(--traffic), var(--money), var(--warn), var(--traffic)) 0 0 / 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: bf-text-flow 9s linear infinite;
    }
    .bfcm .bf-headline .bf-out { animation-delay: -4.5s; }
  }
}
@keyframes bf-text-flow { to { background-position: 150% 0; } }

/* The Stop motion button and the reduced motion setting stop both animations. */
.bf-still .bfcm-actions .bfcm-cta,
.bf-still .bfcm .bf-headline .bf-in,
.bf-still .bfcm .bf-headline .bf-out { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bfcm-actions .bfcm-cta { animation: none; }
}
@media (max-width: 880px) {
  .bfcm-actions .bfcm-cta { width: 100%; }
}