/* Black Friday & Cyber Monday 2026 (/black-friday).
   Figma "BFCM landing page / Desktop 1440" (5921:19938) and "Mobile 390" (5921:21097).
   Phase colours, motion tokens and reduced-motion rules follow "BFCM 2026 landing page · Dev handoff". */

:root {
  --motion-instant: 120ms;
  --motion-quick: 200ms;
  --motion-base: 320ms;
  --motion-slow: 600ms;
  --motion-hero: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1);

  --bf-accent: #0588F0;
  --bf-accent-strong: #0573CC;
  --bf-accent-soft: #E6F4FE;
  --bf-amber: #D97706;
  --bf-amber-soft: #FEF3C7;
  --bf-red: #E5484D;
  --bf-red-strong: #C42B31;
  --bf-red-soft: #FFF1F1;
  --bf-green: #16A34A;
  --bf-green-soft: #DCFCE7;
  --bf-ink: #0A0A0A;
  --bf-muted: #5A5A5A;
  --bf-faint: #8F8F8F;
  --bf-line: #E5E5E5;
  --bf-surface: #FFFFFF;
  --bf-bg: #FAFAFA;
  --bf-radius: 16px;
  --bf-nav-h: 64px;
}

/* Phase tokens: every live element reads --phase. Half price (and waitlist) is calm accent blue. */
.bf { --phase: var(--bf-accent); --phase-soft: var(--bf-accent-soft); --phase-ink: var(--bf-accent-strong); }
.bf[data-phase="final_week"] { --phase: var(--bf-amber); --phase-soft: var(--bf-amber-soft); --phase-ink: #92400E; }
.bf[data-phase="last_48h"] { --phase: var(--bf-red); --phase-soft: var(--bf-red-soft); --phase-ink: var(--bf-red-strong); }
.bf[data-phase="last_hour"] { --phase: var(--bf-red-strong); --phase-soft: var(--bf-red-soft); --phase-ink: var(--bf-red-strong); }
.bf[data-phase="ended"] { --phase: var(--bf-faint); --phase-soft: #F5F5F5; --phase-ink: #525252; }

.bf [hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bf-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bf { color: var(--bf-ink); }
.bf *:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; border-radius: 6px; }
.bf [data-lucide], .bf svg.lucide { width: 16px; height: 16px; flex: none; }

/* Layout */
.bf-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 80px; }
.bf-section { padding: 112px 0; border-top: 0.5px solid var(--bf-line); background: var(--bf-bg); scroll-margin-top: calc(var(--bf-nav-h) + 64px); }
.bf-section-alt { background: #F6F6F7; }
.bf-head { max-width: 720px; margin-bottom: 56px; }
.bf-head.bf-center { max-width: 900px; }
.bf-head.bf-center p { max-width: 640px; margin-left: auto; margin-right: auto; }
.bf-head.bf-center, .bf-center { margin-left: auto; margin-right: auto; text-align: center; }
.bf h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; }
.bf h3 { font-weight: 500; letter-spacing: -0.01em; }
.bf-head p, .bf-split-head p, .bf-lead { margin-top: 16px; font-size: 18px; color: var(--bf-muted); line-height: 1.55; }
.bf-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin-bottom: 20px; font-size: 13px; color: var(--bf-accent-strong); background: var(--bf-accent-soft); border-radius: 999px; }
.bf-eyebrow-new { background: #fff; border: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-new { padding: 1px 7px; border-radius: 999px; background: linear-gradient(90deg, #7C6CF6, #0588F0); color: #fff; font-size: 11px; }
.bf-beta, .bf-tag { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 11px; font-weight: 500; letter-spacing: 0; border-radius: 999px; background: var(--bf-accent-soft); color: var(--bf-accent-strong); vertical-align: middle; }
.bf-tag-green { background: var(--bf-green-soft); color: #15803D; }
.bf-tag-red { background: var(--phase-soft); color: var(--phase-ink); }
.bf-tag-solid { background: var(--bf-accent); color: #fff; }
.bf-fine { font-size: 13px; color: var(--bf-faint); margin-top: 16px; }
.bf-muted { color: var(--bf-faint); }
.bf-accent-text { color: var(--bf-accent-strong); }

/* Buttons */
.bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; font: 500 15px/1 'Inter', sans-serif; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color var(--motion-instant) var(--ease-standard), box-shadow var(--motion-instant) var(--ease-standard), transform var(--motion-instant) var(--ease-standard); }
.bf-btn:active { transform: scale(0.97); }
.bf-btn:hover :is(i, svg) { transform: translateX(2px); }
.bf-btn :is(i, svg) { transition: transform var(--motion-quick) var(--ease-standard); }
.bf-btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.bf-btn-block { width: 100%; }
.bf-btn-dark { background: var(--bf-ink); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.bf-btn-dark:hover { background: #262626; }
.bf-btn-line { background: #fff; color: var(--bf-ink); border-color: var(--bf-line); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); }
.bf-btn-line:hover { border-color: #d1d1d1; }
.bf-btn-white { background: #fff; color: var(--bf-ink); }
.bf-btn-white:hover { background: #F5F5F5; }
.bf-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.bf-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); }
.bf-btn[disabled] { opacity: 0.7; cursor: progress; }
.bf-link-btn { background: none; border: 0; font: 500 14px 'Inter', sans-serif; color: var(--bf-muted); cursor: pointer; padding: 8px; }
.bf-link-btn:hover { color: var(--bf-ink); }
.bf-textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--bf-accent-strong); font-weight: 500; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--motion-instant) var(--ease-standard); }
.bf-textlink:hover { background-size: 100% 1px; }

/* Live dot and timer chip */
.bf-dot { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--phase); }
.bf-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: bf-ping 1400ms ease-out infinite; }
.bf-dot-green { background: var(--bf-green); }
.bf-dot-accent { background: var(--bf-accent); }
.bf.is-calm .bf-dot::after { animation: none; }
@keyframes bf-ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }

.bf-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; background: var(--phase-soft); color: var(--phase-ink); border: 1px solid color-mix(in srgb, var(--phase) 35%, transparent); transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); }
.bf-chip-time { font: 600 13px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--bf-ink); letter-spacing: 0.02em; }
.bf-chip-time .bf-s { color: var(--phase); }
.bf-chip-dark { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.82); border-color: color-mix(in srgb, var(--phase) 55%, transparent); }
.bf-chip-dark .bf-chip-time { color: #fff; }
.bf-tick { animation: bf-dip 240ms var(--ease-standard); }
@keyframes bf-dip { 0% { opacity: 1; } 50% { opacity: 0.15; } 100% { opacity: 1; } }

/* Sale bar */
.bf-salebar { background: var(--bf-ink); color: #fff; font-size: 14px; }
.bf-salebar-inner { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 8px 24px; flex-wrap: wrap; }
.bf-salebar-text { color: rgba(255, 255, 255, 0.8); }
.bf-grad { background: linear-gradient(90deg, #6CB8FF, #B490FF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; }
.bf-salebar-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.bf-salebar-link :is(i, svg) { animation: bf-nudge 8s var(--ease-standard) infinite; }
@keyframes bf-nudge { 0%, 94%, 100% { transform: translateX(0); } 96% { transform: translateX(4px); } }

/* Hero */
.bf-hero { padding: 72px 0 88px; background: var(--bf-bg); border-left: 0; }
.bf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.bf-badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--bf-ink); color: #fff; font-size: 14px; box-shadow: 0 8px 24px color-mix(in srgb, var(--bf-red) 22%, transparent); position: relative; overflow: hidden; }
.bf-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-100%); animation: bf-shimmer 240ms var(--ease-standard) 960ms 1 both; }
@keyframes bf-shimmer { to { transform: translateX(100%); } }
.bf-badge-tag { padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, #F04438, #FB7A3C); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.bf-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-badge-timer { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.2); color: #FF8A8D; font-family: ui-monospace, Menlo, monospace; font-size: 13px; white-space: nowrap; }
.bf-hero-title { margin: 28px 0 20px; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; }
.bf-w { display: inline-block; animation: bf-word 160ms var(--ease-enter) both; animation-delay: calc(120ms + var(--i) * 40ms); }
@keyframes bf-word { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bf-load { animation: bf-rise 320ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@keyframes bf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bf-hero-sub { max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--bf-muted); }

.bf-calc { max-width: 560px; margin-top: 28px; padding: 14px; background: #fff; border: 1px solid var(--bf-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.bf-calc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bf-calc-label { font-size: 14px; color: var(--bf-muted); }
.bf-stepper { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--bf-line); border-radius: 8px; overflow: hidden; }
.bf-step { width: 34px; height: 100%; display: grid; place-items: center; background: #fff; border: 0; cursor: pointer; color: var(--bf-ink); }
.bf-step:hover { background: #F5F5F5; }
.bf-seats { width: 48px; height: 100%; border: 0; text-align: center; font: 500 15px 'Inter', sans-serif; -moz-appearance: textfield; appearance: textfield; background: #fff; }
.bf-seats::-webkit-inner-spin-button, .bf-seats::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bf-seg { display: inline-flex; padding: 3px; margin-left: auto; background: #F5F5F5; border: 1px solid var(--bf-line); border-radius: 9px; gap: 2px; }
.bf-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; font: 500 14px 'Inter', sans-serif; color: var(--bf-muted); cursor: pointer; transition: background-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard); }
.bf-seg button[aria-checked="true"], .bf-seg button[aria-pressed="true"] { background: #fff; color: var(--bf-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.bf-calc-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; background: #F7F7F8; border-radius: 10px; }
.bf-calc-total { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.bf-calc-total s { font-size: 15px; color: var(--bf-faint); font-weight: 400; margin-left: 4px; }
.bf-calc-note { font-size: 13px; color: var(--bf-muted); margin-top: 4px; }
.bf-save { padding: 6px 12px; border-radius: 999px; background: var(--bf-green-soft); color: #15803D; font-size: 14px; font-weight: 500; white-space: nowrap; }
.bf-ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.bf-reassure { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; list-style: none; font-size: 14px; color: var(--bf-muted); }
.bf-reassure li { display: inline-flex; align-items: center; gap: 6px; }
.bf-reassure :is(i, svg) { color: var(--bf-green); }

/* Deal ticket */
.bf-ticket { position: relative; padding: 28px; border-radius: 22px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #0A84FF 0%, rgba(10, 132, 255, 0.35) 30%, transparent 60%), #0A0A0A; box-shadow: 0 30px 60px -20px rgba(5, 136, 240, 0.35); }
.bf-ticket::before, .bf-ticket::after { content: ""; position: absolute; top: 58%; width: 22px; height: 22px; border-radius: 50%; background: var(--bf-bg); }
.bf-ticket::before { left: -11px; } .bf-ticket::after { right: -11px; }
.bf-ticket-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.bf-ticket-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.bf-live-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 12px; }
.bf-live-pill .bf-dot { margin-right: 6px; vertical-align: 1px; }
.bf-ticket-big { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; line-height: 0.9; }
.bf-ticket-num { font-size: 136px; font-weight: 400; letter-spacing: -0.05em; background: linear-gradient(180deg, #fff, #9CCBFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bf-ticket-pct { display: flex; flex-direction: column; font-size: 52px; margin-top: 14px; }
.bf-ticket-pct small { font-size: 30px; font-weight: 600; color: #3AA0FF; text-transform: uppercase; margin-top: 4px; }
.bf-ticket-sub { color: rgba(255, 255, 255, 0.7); font-size: 15px; margin-top: 10px; }
.bf-ticket-prices { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.bf-ticket-prices > div { padding: 18px 0 4px; }
.bf-ticket-prices > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.bf-ticket-plan { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.bf-ticket-prices p { margin-top: 4px; }
.bf-ticket-prices strong { font-size: 32px; font-weight: 500; }
.bf-ticket-prices s { color: rgba(255, 255, 255, 0.45); font-size: 14px; }
.bf-ticket-prices small { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.bf-ticket-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.bf-ticket-label { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phase); font-weight: 500; }
.bf-coupon { text-align: right; }
.bf-coupon .bf-ticket-label { color: rgba(255, 255, 255, 0.6); }
.bf-coupon-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: #fff; font: 600 15px ui-monospace, Menlo, monospace; letter-spacing: 0.08em; cursor: pointer; transition: transform var(--motion-instant) var(--ease-standard); }
.bf-coupon-btn:active { transform: scale(0.96); }
.bf-coupon-state { font: 500 12px 'Inter', sans-serif; letter-spacing: 0; color: #7CC2FF; }

/* Countdown tiles */
.bf-tiles { display: flex; gap: 6px; }
.bf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; height: 58px; padding: 0 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); animation: bf-tile-in 360ms var(--ease-enter) both; animation-delay: calc(640ms + var(--n, 0) * 60ms); transform-origin: bottom; }
@keyframes bf-tile-in { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: none; } }
.bf-tile b { font: 500 24px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.bf-tile small { margin-top: 4px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.bf-tile-s { border-color: color-mix(in srgb, var(--phase) 70%, transparent); background: color-mix(in srgb, var(--phase) 16%, transparent); }
.bf-tile-s b { color: color-mix(in srgb, var(--phase) 60%, #fff); }
.bf[data-phase="last_hour"] .bf-tile-s { background: var(--bf-red-strong); border-color: var(--bf-red-strong); }
.bf[data-phase="last_hour"] .bf-tile-s b { color: #fff; }
.bf-tile-pulse { animation: bf-min-pulse 600ms var(--ease-standard); }
@keyframes bf-min-pulse { 0% { transform: scale(1); } 25% { transform: scale(1.08); } 100% { transform: scale(1); } }
.bf-tiles-lg .bf-tile { min-width: 76px; height: 82px; }
.bf-tiles-lg .bf-tile b { font-size: 34px; }

/* Replaces strip */
.bf-strip { border-top: 0.5px solid var(--bf-line); background: #fff; }
.bf-strip-inner { display: flex; align-items: center; gap: 28px; min-height: 78px; overflow: hidden; }
.bf-strip-label { flex: none; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-faint); }
.bf-logos { display: flex; gap: 28px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.bf-logos::-webkit-scrollbar { display: none; }
.bf-logos li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; color: #404040; filter: grayscale(1); opacity: 0.85; transition: filter var(--motion-quick) var(--ease-standard), opacity var(--motion-quick); }
.bf-logos li:hover { filter: none; opacity: 1; }
.bf-logos img { width: 16px; height: 16px; object-fit: contain; }

/* In-page menu */
.bf-menu { position: sticky; top: var(--bf-nav-h); z-index: 40; background: rgba(250, 250, 250, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 0.5px solid var(--bf-line); border-bottom: 0.5px solid var(--bf-line); }
.bf-menu-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.bf-menu-links { display: flex; gap: 2px; list-style: none; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.bf-menu-links::-webkit-scrollbar { display: none; }
@media (max-width: 960px) {
  .bf-menu-links { padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
}
.bf-menu-links a { display: block; padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--bf-muted); white-space: nowrap; transition: background-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard); }
.bf-menu-links a:hover { color: var(--bf-ink); }
.bf-menu-links a[aria-current="true"] { background: #EDEDED; color: var(--bf-ink); }

/* Why teams switch */
.bf-why { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bf-why-card { background: #fff; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); overflow: hidden; transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.bf-why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.15); }
.bf-why-before { padding: 22px; background: #F7F7F8; border-bottom: 1px solid var(--bf-line); }
.bf-why-top { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.bf-num { color: var(--bf-faint); }
.bf-before { color: var(--bf-red-strong); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.bf-why-tag { margin-left: auto; padding: 3px 9px; border: 1px solid #F5B5B7; border-radius: 999px; color: var(--bf-red-strong); background: #fff; }
.bf-icons { display: flex; gap: 6px; margin: 16px 0; }
.bf-icons img, .bf-ico { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--bf-line); display: grid; place-items: center; object-fit: contain; }
.bf-ico-text { width: auto; padding: 0 10px; font-size: 12px; font-weight: 500; }
.bf-why-pain, .bf-why-after p { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; }
.bf-why-pain :is(i, svg) { color: var(--bf-red); margin-top: 3px; }
.bf-why-after { padding: 20px 22px 24px; }
.bf-with { display: inline-block; margin-bottom: 12px; padding: 3px 8px; border-radius: 6px; background: var(--bf-accent-soft); color: var(--bf-accent-strong); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.bf-why-after p { font-size: 15px; color: var(--bf-muted); }
.bf-why-after :is(i, svg) { color: var(--bf-accent); margin-top: 3px; }

/* Replaces your stack */
.bf-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bf-line); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); overflow: hidden; }
.bf-stack-card { padding: 32px 28px 24px; background: #fff; display: flex; flex-direction: column; }
.bf-tools { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin-bottom: 56px; }
.bf-tools li { display: flex; flex-direction: column; gap: 10px; min-width: 64px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--bf-line), 0 2px 6px rgba(0, 0, 0, 0.04); font-size: 14px; filter: grayscale(1); transition: filter var(--motion-quick); }
.bf-stack-card:hover .bf-tools li { filter: none; }
.bf-tools img { width: 20px; height: 20px; object-fit: contain; }
.bf-stack-card h3 { font-size: 16px; }
.bf-stack-card > p { margin-top: 4px; font-size: 14px; color: var(--bf-muted); }
.bf-stack-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--bf-line); margin-top: 24px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-accent-strong); }
.bf-replaced { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #F5F5F5; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--bf-muted); }
.bf-sum { display: grid; grid-template-columns: 1fr minmax(0, 320px); margin-top: 20px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); overflow: hidden; background: #fff; }
.bf-sum-left { padding: 24px; }
.bf-sum-right { padding: 24px; background: var(--bf-accent-soft); }
.bf-sum-kicker { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-muted); }
.bf-sum-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 18px; }
.bf-sum-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #F5F5F5; font-size: 13px; }
.bf-sum-chips span { color: var(--bf-faint); }
.bf-sum-chips img { width: 14px; height: 14px; object-fit: contain; }
.bf-order-head img { width: 64px; height: 16px; object-fit: contain; }
.bf-sum-total { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--bf-muted); }
.bf-sum-total s { font-size: 34px; color: var(--bf-faint); }
.bf-sum-price { margin: 10px 0 12px; font-size: 13px; color: var(--bf-muted); }
.bf-sum-price strong { font-size: 40px; font-weight: 500; color: var(--bf-ink); margin-right: 6px; }
.bf-sum-right > p:last-child { font-size: 15px; }

/* Strike lines draw left to right (scaleX) */
.bf-strike { position: relative; text-decoration: none; }
.bf-strike::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: currentColor; transform-origin: left; animation: bf-strike 200ms var(--ease-standard) 560ms both; }
.bf-reveal .bf-strike::after { animation: none; transform: scaleX(0); transition: transform var(--motion-slow) var(--ease-standard) 400ms; }
.bf-reveal.is-in .bf-strike::after { transform: scaleX(1); }
@keyframes bf-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bf-drop { display: inline-block; animation: bf-drop 600ms var(--ease-spring) 700ms both; }
.bf-reveal .bf-drop { animation: none; }
.bf-reveal.is-in .bf-drop { animation: bf-drop 600ms var(--ease-spring) 700ms both; }
@keyframes bf-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

/* Data templates */
.bf-sync { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 240px); gap: 48px; align-items: center; }
.bf-sync-col { display: grid; gap: 14px; }
.bf-sync-label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-muted); margin-bottom: 4px; }
.bf-sync-item { display: flex; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--bf-line); border-radius: 12px; font-size: 13px; color: var(--bf-muted); position: relative; }
.bf-sync-item :is(i, svg) { margin-top: 2px; color: var(--bf-ink); }
.bf-sync-item strong { display: block; color: var(--bf-ink); font-weight: 500; font-size: 14px; }
.bf-sync-item::after { content: ""; position: absolute; top: 50%; width: 48px; height: 1px; background: linear-gradient(90deg, var(--bf-accent), transparent); opacity: 0.6; }
.bf-sync-col:first-child .bf-sync-item::after { left: 100%; background: linear-gradient(90deg, var(--bf-line), var(--bf-accent)); }
.bf-sync-col:last-child .bf-sync-item::after { right: 100%; }
.bf-sync.is-in .bf-sync-item { animation: bf-pulse-in 450ms var(--ease-standard) both; animation-delay: calc(var(--k, 0) * 180ms + 600ms); }
.bf-sync-col:first-child .bf-sync-item:first-of-type { --k: -3; }
@keyframes bf-pulse-in { 0% { box-shadow: 0 0 0 0 rgba(5, 136, 240, 0.35); } 100% { box-shadow: 0 0 0 10px rgba(5, 136, 240, 0); } }
.bf-sync-hub { padding: 18px; background: #fff; border: 1.5px solid var(--bf-accent); border-radius: 14px; box-shadow: 0 20px 40px -24px rgba(5, 136, 240, 0.45); }
.bf-sync.is-in .bf-sync-hub { animation: bf-hub 600ms var(--ease-standard) 450ms both; }
@keyframes bf-hub { 50% { box-shadow: 0 0 0 6px rgba(5, 136, 240, 0.15); } }
.bf-sync-hub-title { font-size: 18px; margin-bottom: 12px; }
.bf-sync-hub-title span { margin-right: 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-accent-strong); }
.bf-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bf-mini-table th { text-align: left; font-weight: 500; color: var(--bf-faint); padding: 6px 4px; border-bottom: 1px solid var(--bf-line); }
.bf-mini-table td { padding: 7px 4px; border-bottom: 1px solid #F1F1F1; white-space: nowrap; }
.bf-sync.is-in .bf-new-row { animation: bf-row 500ms var(--ease-enter) 1.2s both; }
@keyframes bf-row { from { opacity: 0; transform: translateY(-6px); background: var(--bf-accent-soft); } to { opacity: 1; transform: none; } }
.bf-st { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-style: normal; background: #F5F5F5; color: var(--bf-muted); }
.bf-st-blue { background: var(--bf-accent-soft); color: var(--bf-accent-strong); }
.bf-st-amber { background: var(--bf-amber-soft); color: #92400E; }
.bf-st-green { background: var(--bf-green-soft); color: #15803D; }
.bf-sync-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.bf-sync-tags span { padding: 4px 10px; border-radius: 999px; background: var(--bf-accent-soft); color: var(--bf-accent-strong); font-size: 12px; }
.bf-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--bf-line); }
.bf-three h3 { font-size: 18px; } .bf-three p { margin-top: 6px; font-size: 15px; color: var(--bf-muted); }
.bf-cta-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 44px; flex-wrap: wrap; }
.bf-cta-row .bf-textlink { color: var(--bf-muted); font-weight: 400; }
.bf-cta-row-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* Use cases */
.bf-industries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: -24px auto 40px; max-width: 920px; }
.bf-industries li > * { display: inline-block; padding: 7px 12px; border: 1px solid var(--bf-line); border-radius: 999px; background: #fff; font-size: 14px; }
.bf-industries a:hover { border-color: #c9c9c9; }
.bf-industries-label { align-self: center; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-faint); margin-right: 4px; }
.bf-more { color: var(--bf-accent-strong); background: var(--bf-accent-soft) !important; border-color: transparent !important; }
.bf-uses, .bf-newtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.bf-use { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bf-line); border-radius: 14px; overflow: hidden; padding-bottom: 18px; transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.bf-use:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.18); }
.bf-use-ui { position: relative; height: 150px; margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; background: #F5F6F8; border: 1px solid #ECECEC; border-bottom: 0; font-size: 11px; overflow: hidden; }
.bf-use-ui-soft { background: linear-gradient(180deg, #EEF6FF, #F7FAFF); }
.bf-use h3 { margin: 16px 16px 0; font-size: 16px; }
.bf-use > p { margin: 6px 16px 0; font-size: 14px; color: var(--bf-muted); line-height: 1.45; }
.bf-see { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 10px 16px 0; font-size: 14px; color: var(--bf-accent-strong); font-weight: 500; }
/* Touch: a 44px tap area around the text link without moving it */
@media (pointer: coarse) { .bf-see::after { content: ""; position: absolute; inset: -12px -8px; } }
.bf-see :is(i, svg) { width: 14px; height: 14px; }
.bf-use-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bf-use-bar span { color: var(--bf-accent-strong); }
.bf-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bf-kanban > div { padding: 6px; background: #fff; border-radius: 6px; border: 1px solid #ECECEC; min-height: 80px; }
.bf-kanban small { display: block; color: var(--bf-faint); margin-bottom: 4px; }
.bf-kwin { background: #F0FDF4 !important; border-color: #BBF7D0 !important; }
.bf-kcard { display: block; padding: 6px; border-radius: 6px; background: #fff; border: 1px solid #ECECEC; font-weight: 500; }
.bf-kcard em { display: block; font-style: normal; font-weight: 400; color: var(--bf-faint); }
.bf-use[data-play] .bf-kcard-move { animation: bf-move 700ms var(--ease-standard) both; }
@keyframes bf-move { 0% { transform: none; } 100% { transform: translateX(calc(100% + 12px)); background: #F0FDF4; } }
.bf-progress { position: relative; display: inline-block; width: 100%; height: 6px; border-radius: 999px; background: #E5E7EB; overflow: hidden; vertical-align: middle; }
.bf-progress > span { position: absolute; inset: 0; background: var(--bf-accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-standard); }
.bf-check-meta { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; color: var(--bf-muted); }
.bf-checks { list-style: none; display: grid; gap: 4px; }
.bf-checks li { display: flex; justify-content: space-between; padding: 5px 6px 5px 22px; border-radius: 6px; background: #fff; position: relative; }
.bf-checks li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid #D4D4D4; }
.bf-checks li.is-done, .bf-checks li.is-done em { text-decoration: line-through; color: var(--bf-faint); }
.bf-checks li.is-done::before, .bf-checks li.is-ok::before { background: var(--bf-green); border-color: var(--bf-green); }
.bf-checks em { font-style: normal; color: var(--bf-faint); }
.bf-checks li.is-ok em { color: #15803D; }
.bf-use[data-play] .bf-check-next::before { background: var(--bf-green); border-color: var(--bf-green); transition: background-color 300ms 300ms; }
.bf-req { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.bf-use[data-play] .bf-kcard-drop { animation: bf-dropin 700ms var(--ease-spring) both; }
@keyframes bf-dropin { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.bf-rows { list-style: none; display: grid; gap: 4px; }
.bf-rows li { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 6px; background: #fff; }
.bf-rows li span { color: var(--bf-faint); }
.bf-rows li em { margin-left: auto; font-style: normal; color: var(--bf-muted); }
.bf-use[data-play] .bf-row-new { animation: bf-row 700ms var(--ease-enter) both; }
.bf-approve-title { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 500; }
.bf-stamp { position: absolute; right: 12px; bottom: 14px; padding: 4px 10px; border: 2px solid var(--bf-green); color: var(--bf-green); border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transform: rotate(-8deg) scale(1.6); opacity: 0; }
.bf-use[data-play] .bf-stamp { animation: bf-stamp 700ms var(--ease-spring) 300ms both; }
@keyframes bf-stamp { to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.bf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.bf-newtiles .bf-kpis { grid-template-columns: 1fr 1fr; }
.bf-kpis > span { padding: 8px; border-radius: 6px; background: #fff; font-size: 15px; font-weight: 500; }
.bf-kpis small { display: block; font-size: 10px; color: var(--bf-faint); font-weight: 400; }
.bf-bar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.bf-comment { position: absolute; left: 10px; right: 10px; bottom: 8px; padding: 6px 8px; background: var(--bf-accent-soft); border-radius: 6px; color: var(--bf-accent-strong); }
.bf-use[data-play] .bf-comment { animation: bf-dropin 700ms var(--ease-enter) both; }
.bf-url { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: #fff; border: 1px solid #E5E7EB; font-family: ui-monospace, Menlo, monospace; }
.bf-url :is(i, svg) { width: 12px; height: 12px; color: var(--bf-green); }
.bf-url-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; color: var(--bf-muted); }
.bf-sent { margin-top: 8px; display: flex; gap: 8px; color: var(--bf-muted); }
.bf-sent span { color: var(--bf-accent-strong); }
.bf-use h3 .bf-tag { margin-left: 4px; }

/* MCP */
.bf-mcp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; margin-bottom: 40px; }
.bf-mcp-steps li { padding-top: 16px; border-top: 2px solid var(--bf-ink); font-size: 15px; }
.bf-mcp-steps li:last-child { border-color: var(--bf-accent); color: var(--bf-accent-strong); }
.bf-mcp-steps b { font-size: 12px; font-weight: 500; margin-right: 6px; }
.bf-mcp-steps span { display: block; margin-top: 6px; font-size: 13px; color: var(--bf-muted); }
.bf-mcp-steps code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bf-ink); }
/* MCP panel: "Introducing Tulvo MCP" (left) and how your AI reaches the workspace (right). */
.bf-mcpx { --mx-green: #2F8A5B; --mx-green-ink: #1F6B44; --mx-green-soft: #EEFAF3; --mx-green-line: #A9E2C3; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border: 1px solid var(--bf-line); border-radius: 22px; background: #fff; overflow: hidden; text-align: left; }
.bf-mcpx b { font-weight: 500; }
.bf-mcpx small { display: block; color: var(--bf-muted); }
.bf-mcpx-left { padding: 36px 32px; border-right: 1px solid var(--bf-line); }
.bf-mcpx-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-muted); }
.bf-mcpx-kicon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--bf-line); border-radius: 6px; color: var(--bf-ink); }
.bf-mcpx-kicon :is(i, svg) { width: 13px; height: 13px; }
.bf-mcpx-title { margin-top: 14px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.bf-mcpx-sub { margin-top: 10px; font-size: 15px; color: var(--bf-muted); }
.bf-mcpx-tpl { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--mx-green-line); border-radius: 14px; background: var(--mx-green-soft); box-shadow: 0 0 0 4px rgba(47, 138, 91, 0.08); color: var(--mx-green-ink); text-decoration: none; transition: box-shadow var(--motion-base) var(--ease-standard); }
.bf-mcpx-tpl:hover { box-shadow: 0 0 0 4px rgba(47, 138, 91, 0.16); }
.bf-mcpx-tpl-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--mx-green); color: #fff; }
.bf-mcpx-tpl-icon :is(i, svg) { width: 18px; height: 18px; }
.bf-mcpx-tpl-text { flex: 1; min-width: 0; }
.bf-mcpx-tpl-text b { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--bf-ink); }
.bf-mcpx-tpl-text small { margin-top: 4px; font-size: 13px; color: var(--mx-green-ink); }
.bf-mcpx-start { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--mx-green); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }
.bf-mcpx-chev { flex: none; width: 16px; height: 16px; margin-left: auto; }
.bf-mcpx-then { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-muted); }
.bf-mcpx-then::after { content: ""; flex: 1; height: 1px; background: var(--bf-line); }
.bf-mcpx-then :is(i, svg) { width: 13px; height: 13px; }
.bf-mcpx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; }
.bf-mcpx-grid li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--bf-line); border-radius: 12px; font-size: 15px; }
.bf-mcpx-grid small { font-size: 12.5px; }
.bf-mcpx-gicon { --c: #5B5BD6; --s: #EEF0FF; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--s); color: var(--c); }
.bf-mcpx-gicon :is(i, svg) { width: 15px; height: 15px; }
.bf-mcpx-k-dash .bf-mcpx-gicon { --c: #C2620A; --s: #FFF3E6; }
.bf-mcpx-k-site .bf-mcpx-gicon { --c: #7C4DDB; --s: #F3EDFF; }
.bf-mcpx-k-doc .bf-mcpx-gicon { --c: #2C7A86; --s: #E8F6F8; }
.bf-mcpx-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px 10px 12px; border-radius: 12px; background: #161616; color: rgba(255, 255, 255, 0.72); font-size: 14px; text-decoration: none; transition: background-color var(--motion-base) var(--ease-standard); }
.bf-mcpx-bar:hover { background: #000; }
.bf-mcpx-bar b { color: #fff; }
.bf-mcpx-bar-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.12); color: #fff; }
.bf-mcpx-bar-icon :is(i, svg) { width: 14px; height: 14px; }
.bf-mcpx-bar .bf-mcpx-chev { color: #fff; }

.bf-mcpx-right { --net-gap: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: var(--net-gap) 20px; align-items: center; padding: 32px 28px; background-color: #FAFAFA; background-image: radial-gradient(#DADADA 1px, transparent 1px); background-size: 16px 16px; }
.bf-mcpx-net { position: relative; display: flex; align-items: center; align-self: stretch; }
/* Dashed lines: MCP hub to the workspace card, and down to the "Try asking" card. */
.bf-mcpx-net::before, .bf-mcpx-net::after { content: ""; position: absolute; }
.bf-mcpx-net::before { left: calc(var(--apps-w) + 64px + var(--hub)); right: -20px; top: 50%; border-top: 2px dashed #B9DCC8; }
.bf-mcpx-net::after { left: calc(var(--apps-w) + 64px + var(--hub) / 2 - 1px); top: calc(50% + var(--hub) / 2); bottom: calc(-1 * var(--net-gap)); border-left: 2px dashed #7CC49D; }
.bf-mcpx-apps { flex: none; display: grid; grid-auto-rows: 76px; gap: 14px; width: var(--apps-w); list-style: none; }
.bf-mcpx-net { --apps-w: 140px; --hub: 50px; }
.bf-mcpx-app { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--bf-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-size: 14px; line-height: 1.25; }
.bf-mcpx-app small { font-size: 11.5px; }
.bf-mcpx-logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; }
.bf-mcpx-logo svg { width: 16px; height: 16px; fill: currentColor; }
.bf-mcpx-app-claude .bf-mcpx-logo { background: #FBEDE7; color: #D97757; }
.bf-mcpx-app-openai .bf-mcpx-logo { background: #0A0A0A; color: #fff; }
.bf-mcpx-app-googlegemini .bf-mcpx-logo { background: #EAF1FE; color: #4285F4; }
.bf-mcpx-app-cursor .bf-mcpx-logo { background: #fff; color: #0A0A0A; border: 1px solid var(--bf-line); }
.bf-mcpx-links { flex: none; width: 64px; height: 346px; fill: none; stroke: #C9C9C9; stroke-width: 1.25; stroke-dasharray: 3 4; }
.bf-mcpx-hub { flex: none; display: grid; place-items: center; align-content: center; gap: 3px; width: var(--hub); height: var(--hub); padding: 0; border-radius: 12px; background: #0A0A0A; color: #fff; font: 600 9.5px ui-monospace, Menlo, monospace; letter-spacing: 0.1em; box-shadow: 0 0 0 6px rgba(124, 196, 157, 0.18); z-index: 1; }
.bf-mcpx-hub :is(i, svg) { width: 15px; height: 15px; }
.bf-mcpx.is-in .bf-mcpx-hub { animation: bf-hub 2.4s var(--ease-standard) 400ms 2 both; }
@keyframes bf-hub { 50% { box-shadow: 0 0 0 10px rgba(124, 196, 157, 0.28); } }
.bf-mcpx.is-in .bf-mcpx-links path { animation: bf-flow 1.2s linear infinite; }
@keyframes bf-flow { to { stroke-dashoffset: -14; } }

.bf-mcpx-ws { position: relative; z-index: 1; padding: 14px; border: 1px solid var(--bf-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.18); }
.bf-mcpx-ws-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--bf-line); font-size: 14px; line-height: 1.3; }
.bf-mcpx-ws-head small { font-size: 12px; }
.bf-mcpx-ws-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--bf-line); border-radius: 8px; }
.bf-mcpx-ws-mark img { width: 16px; height: 16px; }
.bf-mcpx-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--mx-green-soft); color: var(--mx-green-ink); font-size: 11px; font-weight: 500; }
.bf-mcpx-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-green); }
.bf-mcpx-steps { display: grid; gap: 6px; list-style: none; }
.bf-mcpx-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; background: #FAFAFA; color: var(--bf-muted); font-size: 13.5px; transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); }
.bf-mcpx-sicon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--bf-line); border-radius: 6px; background: #fff; color: var(--bf-faint); transition: color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); }
.bf-mcpx-sicon :is(i, svg) { width: 13px; height: 13px; }
.bf-mcpx-steps .bf-mcpx-start { margin-left: auto; background: #D9F2E4; color: var(--mx-green-ink); }
.bf-mcpx-tick { width: 15px; height: 15px; margin-left: auto; color: var(--mx-green); visibility: hidden; transform: scale(0.6); transition: visibility var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.bf-mcpx-steps li.is-on { background: var(--mx-green-soft); color: var(--bf-ink); }
.bf-mcpx-steps li.is-on .bf-mcpx-sicon { color: var(--mx-green); border-color: var(--mx-green-line); }
.bf-mcpx-steps li.is-on .bf-mcpx-tick { visibility: visible; transform: none; }
.bf-mcpx-more { margin: 12px 2px 0; font-size: 12.5px; color: var(--bf-muted); }

.bf-mcpx-ask { position: relative; z-index: 1; grid-column: 1 / -1; padding: 18px 20px; border: 1.5px solid var(--mx-green-line); border-radius: 16px; background: #fff; box-shadow: 0 0 0 4px rgba(47, 138, 91, 0.06); }
.bf-mcpx-ask-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.bf-mcpx-ask-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mx-green-ink); }
.bf-mcpx-ask-head :is(i, svg) { width: 15px; height: 15px; }
.bf-mcpx-count { font-size: 12px; color: var(--bf-muted); font-variant-numeric: tabular-nums; }
.bf-mcpx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-mcpx-tabs button { padding: 6px 12px; border: 1px solid var(--bf-line); border-radius: 999px; background: #fff; color: var(--bf-ink); font: 14px 'Inter', sans-serif; cursor: pointer; transition: background-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard); }
.bf-mcpx-tabs button:hover { border-color: #CFCFCF; }
.bf-mcpx-tabs button[aria-selected="true"] { background: var(--bf-ink); border-color: var(--bf-ink); color: #fff; }
.bf-mcpx-quote { margin-top: 14px; min-height: 3em; font: 14.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bf-ink); }
.bf-caps { list-style: none; display: grid; gap: 6px; }
.bf-caps li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #F5F5F5; font: 13px ui-monospace, Menlo, monospace; animation: bf-rise 200ms var(--ease-standard) both; }
.bf-caps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-green); flex: none; }
.bf-allcaps { margin-top: 24px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); background: #fff; }
.bf-allcaps summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.bf-allcaps summary::-webkit-details-marker { display: none; }
.bf-allcaps summary small { display: block; font-size: 13px; color: var(--bf-muted); }
.bf-allcaps-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--bf-line); border-radius: 999px; font-size: 14px; white-space: nowrap; }
.bf-allcaps .bf-when-open, .bf-allcaps[open] .bf-when-closed { display: none; }
.bf-allcaps[open] .bf-when-open { display: inline; }
.bf-allcaps[open] .bf-allcaps-btn :is(i, svg) { transform: rotate(180deg); }
.bf-allcaps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 22px; }
.bf-allcaps-grid > div { padding: 14px; border: 1px solid var(--bf-line); border-radius: 12px; }
.bf-allcaps-grid h3 { display: flex; justify-content: space-between; font-size: 15px; }
.bf-allcaps-grid h3 span { color: var(--bf-faint); font-size: 13px; }
.bf-allcaps-grid > div > p { font-size: 12px; color: var(--bf-muted); margin: 4px 0 10px; }
.bf-allcaps .bf-fine { padding: 0 22px 20px; }
.bf-mcp-cta { display: flex; justify-content: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.bf-copyfield { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bf-line); background: #fff; cursor: pointer; font: 500 14px 'Inter', sans-serif; color: var(--bf-accent-strong); }
.bf-copyfield code { font-size: 14px; color: var(--bf-ink); }
.bf-new-label { margin-top: 56px; margin-bottom: 14px; }

/* Comparison */
.bf-cmp { border: 1px solid var(--bf-line); border-radius: var(--bf-radius); overflow: hidden; background: #fff; }
.bf-table-scroll { overflow-x: auto; }
.bf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bf-table th, .bf-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid #F0F0F0; vertical-align: middle; }
.bf-table thead th { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-muted); background: #FAFAFA; }
.bf-table tbody th { font-weight: 500; }
.bf-col-tulvo { background: #F3F9FF; color: var(--bf-ink); }
.bf-table thead .bf-col-tulvo { background: #DCEEFE; color: var(--bf-accent-strong); }
.bf-table td.bf-col-tulvo :is(i, svg) { color: var(--bf-accent); margin-right: 8px; vertical-align: -3px; }
.bf-logo-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; padding: 3px 9px; border: 1px solid var(--bf-line); border-radius: 999px; font-size: 13px; white-space: nowrap; filter: grayscale(1); transition: filter var(--motion-quick); }
.bf-logo-chip:hover { filter: none; }
.bf-logo-chip img { width: 12px; height: 12px; object-fit: contain; }
.bf-reveal.is-in .bf-table tbody tr { animation: bf-rise 320ms var(--ease-enter) both; }
.bf-reveal.is-in .bf-table tbody tr:nth-child(2) { animation-delay: 30ms; } .bf-reveal.is-in .bf-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.bf-reveal.is-in .bf-table tbody tr:nth-child(4) { animation-delay: 90ms; } .bf-reveal.is-in .bf-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.bf-reveal.is-in .bf-table tbody tr:nth-child(6) { animation-delay: 150ms; } .bf-reveal.is-in .bf-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.bf-reveal.is-in .bf-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.bf-allofit { display: grid; grid-template-columns: 1fr minmax(0, 340px); }
.bf-allofit-copy { padding: 28px; }
.bf-allofit-copy h3 { font-size: 22px; }
.bf-allofit-copy p { margin: 6px 0 14px; color: var(--bf-muted); }
.bf-allofit-price { padding: 24px 28px; color: #fff; background: linear-gradient(160deg, #0A84FF, #0466C8); }
.bf-allofit-plans { display: flex; gap: 28px; }
.bf-allofit-plans small { display: block; font-size: 12px; opacity: 0.8; }
.bf-allofit-plans strong { font-size: 36px; font-weight: 500; }
.bf-allofit-plans s { opacity: 0.6; font-size: 14px; }
.bf-allofit-note { font-size: 13px; opacity: 0.8; margin: 6px 0 16px; }
.bf-allofit-price .bf-btn { width: 100%; }

/* Pricing */
.bf-pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.bf-billing { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #F2F2F3; border: 1px solid var(--bf-line); }
.bf-billing button { position: relative; z-index: 1; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 500 15px 'Inter', sans-serif; color: var(--bf-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--motion-quick) var(--ease-standard); }
.bf-billing button[aria-checked="true"] { color: var(--bf-ink); }
.bf-billing-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform var(--motion-quick) var(--ease-standard), width var(--motion-quick) var(--ease-standard); }
.bf-phasebar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 24px; border-radius: 10px; background: color-mix(in srgb, var(--phase-soft) 70%, #fff); border: 1px solid color-mix(in srgb, var(--phase) 25%, transparent); font-size: 14px; color: #3f3f3f; }
.bf-phasebar > :is(i, svg) { color: var(--phase); }
.bf-phasebar p { flex: 1; }
.bf-phasebar strong { color: var(--phase-ink); font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.bf-phasebar-day { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; color: var(--phase-ink); }
.bf-phasebar-meter { width: 72px; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.bf-phasebar-meter span { display: block; height: 100%; background: var(--phase); transform-origin: left; transform: scaleX(var(--p, 0)); }
.bf-phasebar-neutral { --phase: var(--bf-accent); --phase-soft: #F5F5F5; }
.bf-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); background: #fff; }
.bf-plan { display: flex; flex-direction: column; border-right: 1px solid var(--bf-line); position: relative; transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.bf-plan:last-child { border-right: 0; }
/* Each card spans two rows of the plan grid (top, limits) via subgrid, so the dividers, buttons and "Your limits" line up across cards. */
.bf-plan { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.bf-plan-top { padding: 24px 20px; border-bottom: 1px solid var(--bf-line); display: flex; flex-direction: column; min-height: 400px; }
.bf-plan-body { padding: 20px; }
.bf-plan h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; min-height: 26px; }
.bf-plan-featured { outline: 1.5px solid var(--bf-accent); outline-offset: -1px; border-radius: 4px; z-index: 1; }
@media (hover: hover) { .bf-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.25); z-index: 2; background: #fff; } }
.bf-plan.is-arrived { animation: bf-arrive 950ms var(--ease-standard) 450ms both; }
@keyframes bf-arrive { 0% { transform: none; box-shadow: none; } 19% { transform: translateY(-4px); box-shadow: 0 0 0 6px rgba(5, 136, 240, 0.18); } 100% { transform: none; box-shadow: none; } }
.bf-strike-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--bf-faint); }
.bf-flat { padding: 2px 8px; border-radius: 6px; background: var(--bf-ink); color: #fff; font-size: 12px; }
.bf-price { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 52px; }
.bf-price strong { font-size: 44px; font-weight: 500; letter-spacing: -0.03em; display: inline-block; }
.bf-price span { font-size: 13px; color: var(--bf-muted); line-height: 1.3; }
.bf-price-custom strong { font-size: 34px; color: #404040; }
.bf-roll { animation: bf-roll 320ms var(--ease-standard); }
@keyframes bf-roll { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }
.bf-plan-desc { margin-top: 8px; font-size: 14px; color: var(--bf-muted); min-height: 42px; }
.bf-plan-note { margin-top: 14px; font-size: 13px; color: var(--bf-muted); }
.bf-plan-note strong { color: var(--bf-ink); font-weight: 500; }
.bf-plan-pay { margin-top: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bf-line); font-size: 13px; color: var(--bf-muted); }
.bf-plan-pay strong { color: var(--bf-ink); font-weight: 500; }
.bf-plan-pay-accent { background: var(--bf-accent-soft); border-color: transparent; }
.bf-codechip { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 7px 10px; border: 1px dashed #E8C66B; border-radius: 8px; background: #FFFBEB; font: 600 13px ui-monospace, Menlo, monospace; letter-spacing: 0.04em; cursor: pointer; color: var(--bf-ink); transition: transform var(--motion-instant) var(--ease-standard); }
.bf-codechip:active { transform: scale(0.96); }
.bf-codechip-act { display: inline-flex; align-items: center; gap: 6px; font: 500 12px 'Inter', sans-serif; letter-spacing: 0; color: #92400E; }
.bf-codechip-act :is(i, svg) { width: 13px; height: 13px; }
.bf-plan-check { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 14px; }
.bf-plan-check :is(i, svg) { color: var(--bf-accent); }
.bf-plan-top .bf-btn { margin-top: auto; }
.bf-plan-fine { margin-top: 10px; text-align: center; font-size: 12px; color: var(--bf-faint); }
/* Reserve two lines (even when a phase hides the line) so every card's button sits at the same height. */
.bf-plan-top .bf-plan-fine { min-height: 36px; }
.bf .bf-plan-top .bf-plan-fine[hidden] { display: block !important; visibility: hidden; }
.bf-limits-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-faint); margin-bottom: 10px; }
.bf-limits { list-style: none; display: grid; gap: 9px; font-size: 14px; margin-bottom: 22px; }
.bf-limits li { display: flex; justify-content: space-between; gap: 8px; color: var(--bf-muted); }
.bf-limits li span:last-child { color: var(--bf-ink); }
.bf-incl { list-style: none; display: grid; gap: 9px; font-size: 14px; }
.bf-incl li { position: relative; padding-left: 22px; }
.bf-incl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 7px; border-left: 2px solid var(--bf-accent); border-bottom: 2px solid var(--bf-accent); transform: rotate(-45deg); }
.bf-plan-perks { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border: 1px solid var(--bf-line); border-top: 0; border-radius: 0 0 var(--bf-radius) var(--bf-radius); background: #FCFCFC; margin-top: -1px; }
.bf-plan-perks li { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 14px; }
.bf-plan-perks :is(i, svg) { color: var(--bf-accent); }
.bf-finder { display: grid; grid-template-columns: minmax(0, 220px) 1fr minmax(0, 260px); gap: 32px; margin-top: 24px; padding: 28px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); background: linear-gradient(120deg, #EEF6FF, #fff 45%); }
.bf-finder-intro h3 { font-size: 20px; } .bf-finder-intro p { margin-top: 8px; font-size: 13px; color: var(--bf-muted); }
.bf-finder-qs { display: grid; gap: 14px; }
.bf-finder fieldset { border: 0; }
.bf-finder legend { font-size: 14px; margin-bottom: 8px; }
.bf-seg-wrap { margin-left: 0; flex-wrap: wrap; }
.bf-finder-result { border-radius: 12px; background: #fff; border: 1px solid var(--bf-line); overflow: hidden; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.25); }
.bf-finder-kicker { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bf-ink); color: #fff; font-size: 12px; }
.bf-finder-body { padding: 14px; }
.bf-finder-plan { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 500; }
.bf-finder-price s { color: var(--bf-faint); font-size: 13px; font-weight: 400; }
.bf-finder-price strong { color: var(--bf-accent-strong); }
.bf-finder-sub { font-size: 12px; color: var(--bf-muted); margin: 2px 0 10px; }
.bf-finder-body .bf-incl { font-size: 13px; margin-bottom: 14px; }
.bf-finder-body .bf-btn { height: 40px; font-size: 14px; }

/* Deal window */
.bf-split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.bf-split-head p { margin-top: 0; }
.bf-meter { padding: 24px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); background: #fff; }
.bf-meter-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bf-meter-today { display: inline-flex; align-items: center; gap: 8px; color: var(--phase-ink); font-size: 14px; }
.bf-meter-title { font-size: 22px; font-weight: 500; margin-top: 4px; }
.bf-meter-track { position: relative; margin-top: 44px; }
.bf-meter-days { display: grid; grid-template-columns: repeat(21, 1fr); gap: 4px; list-style: none; }
.bf-meter-days li { height: 8px; border-radius: 999px; background: var(--bf-accent-soft); transform-origin: left; }
.bf-meter-days li.is-fw { background: var(--bf-amber-soft); }
.bf-meter-days li.is-48 { background: var(--bf-red-soft); }
.bf-meter-days li.is-past { background: var(--phase); }
.bf-meter-days li.is-today { background: var(--phase); height: 12px; margin-top: -2px; }
.bf-reveal .bf-meter-days li.is-past, .bf-reveal .bf-meter-days li.is-today { transform: scaleX(0); transition: transform 900ms var(--ease-standard); transition-delay: calc(var(--n, 0) * 30ms); }
.bf-reveal.is-in .bf-meter-days li { transform: none; }
.bf-meter-pin { position: absolute; bottom: 18px; left: 0; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--bf-ink); color: #fff; font-size: 11px; white-space: nowrap; }
.bf-reveal.is-in .bf-meter-pin { animation: bf-pin 600ms var(--ease-spring) 700ms both; }
@keyframes bf-pin { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
.bf-meter-axis { display: grid; grid-template-columns: var(--axis-cols, 12fr 3fr 6fr 1fr); margin-top: 14px; font-size: 12px; }
.bf-meter-axis span:last-child { text-align: right; }
.bf-meter-axis small { display: block; color: var(--bf-faint); }
.bf-axis-amber { color: var(--bf-amber); } .bf-axis-red { color: var(--bf-red); }
.bf-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin-top: 16px; }
.bf-phases li { position: relative; padding: 18px; border: 1px solid var(--bf-line); border-radius: 12px; background: #fff; }
.bf-phases-when { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-accent-strong); }
.bf-phases li[data-phase-card="final_week"] .bf-phases-when { color: var(--bf-amber); }
.bf-phases li[data-phase-card="last_48h"] .bf-phases-when { color: var(--bf-red); }
.bf-phases li[data-phase-card="ended"] .bf-phases-when { color: var(--bf-faint); }
.bf-phases h3 { font-size: 17px; margin-top: 4px; } .bf-phases p { font-size: 14px; color: var(--bf-muted); margin-top: 4px; }
.bf-here { display: none; position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: 999px; background: var(--bf-ink); color: #fff; font-size: 11px; }
.bf-phases li.is-current { border: 1.5px solid var(--phase); box-shadow: 0 8px 24px -16px var(--phase); }
.bf-phases li.is-current .bf-here { display: inline-block; }

/* How to grab it */
.bf-how { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: 64px; align-items: center; }
.bf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 40px 0 28px; }
.bf-steps li { padding-top: 12px; border-top: 1px solid var(--bf-line); font-size: 14px; color: var(--bf-muted); }
/* Only the step label is a block; plan names and dates inside the text stay inline. */
.bf-step-label { display: block; color: var(--bf-accent-strong); margin-bottom: 4px; }
.bf-step-label [data-d] { white-space: nowrap; }
.bf-order { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--bf-line); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.25); }
.bf-order p { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bf-order-head { padding-bottom: 14px; border-bottom: 1px solid var(--bf-line); font-weight: 500; }
.bf-order-line { padding: 16px 0; font-size: 15px; }
.bf-order small { display: block; font-size: 13px; color: var(--bf-muted); }
.bf-order-discount { justify-content: flex-start !important; padding: 12px; border-radius: 10px; background: var(--bf-accent-soft); font-size: 15px; }
.bf-order-discount :is(i, svg) { color: var(--bf-accent); width: 22px; height: 22px; }
.bf-order-discount span:last-child { margin-left: auto; }
.bf-order-discount small { color: var(--bf-accent-strong); }
.bf-order-total { padding: 20px 0; font-size: 14px; color: var(--bf-muted); }
.bf-order-total strong { font-size: 28px; color: var(--bf-ink); font-weight: 500; }
.bf-order-total s { font-size: 13px; color: var(--bf-faint); }
.bf-reveal .bf-order-line, .bf-reveal .bf-order-discount, .bf-reveal .bf-order-total { opacity: 0; transform: translateX(-12px); }
.bf-reveal.is-in .bf-order-line { animation: bf-slide 320ms var(--ease-enter) 100ms both; }
.bf-reveal.is-in .bf-order-discount { animation: bf-slide 320ms var(--ease-enter) 420ms both; }
.bf-reveal.is-in .bf-order-total { animation: bf-slide 320ms var(--ease-enter) 740ms both; }
.bf-reveal.is-in .bf-order-was { animation: bf-fade 200ms var(--ease-standard) 1.2s both; }
@keyframes bf-slide { to { opacity: 1; transform: none; } }
@keyframes bf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Compare plans */
.bf-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.bf-fit > div { padding: 20px; border-radius: 12px; }
.bf-fit h3 { font-size: 16px; margin-bottom: 12px; }
.bf-fit ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.bf-fit li { position: relative; padding-left: 26px; }
.bf-fit-yes { background: var(--bf-accent-soft); }
.bf-fit-yes li::before { content: "✓"; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--bf-accent); color: #fff; font-size: 11px; display: grid; place-items: center; }
.bf-fit-no { background: #F2F2F3; color: var(--bf-muted); }
.bf-fit-no li::before { content: "×"; position: absolute; left: 4px; color: var(--bf-faint); }
.bf-table-plans { border: 1px solid var(--bf-ink); border-radius: var(--bf-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.bf-table-plans thead th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--bf-ink); background: #fff; }
.bf-table-plans thead th strong { display: block; font-size: 24px; font-weight: 500; }
.bf-table-plans thead th s { font-size: 13px; color: var(--bf-faint); font-weight: 400; }
.bf-table-plans thead th small { font-size: 11px; color: var(--bf-faint); text-transform: uppercase; }
.bf-table-plans thead .bf-col-tulvo { background: #F3F9FF; color: var(--bf-ink); }
.bf-table-plans td :is(i, svg) { color: var(--bf-accent); }
.bf-compare-all { margin-top: 20px; }

/* FAQ */
.bf-faq-grid { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 80px; }
.bf-faq-grid .bf-btn { margin-top: 24px; }
.bf-faq details { border-bottom: 1px solid #D4D4D4; }
.bf-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; }
.bf-faq summary::-webkit-details-marker { display: none; }
.bf-faq summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 300; transition: transform var(--motion-base) var(--ease-standard); }
.bf-faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.bf-faq details p { padding: 0 32px 18px 0; font-size: 15px; color: var(--bf-muted); line-height: 1.6; }
.bf-faq details p strong { color: var(--bf-ink); font-weight: 500; }
.bf-faq details[open] p { animation: bf-rise 320ms var(--ease-standard); }

/* Final CTA */
.bf-final { padding: 112px 0; background: radial-gradient(80% 120% at 50% 0%, #102A4A 0%, #0A0A0A 60%); color: #fff; text-align: center; }
.bf-final-inner { display: flex; flex-direction: column; align-items: center; }
.bf-final p { margin-top: 16px; color: rgba(255, 255, 255, 0.7); font-size: 17px; }
.bf-final .bf-tiles { margin-top: 32px; }
.bf-final-ctas { position: relative; margin-top: 28px; display: flex; gap: 12px; }
.bf-glow { position: absolute; inset: -14px -24px; border-radius: 20px; background: radial-gradient(closest-side, rgba(5, 136, 240, 0.55), transparent); filter: blur(12px); z-index: -1; opacity: 0.5; }
.bf-final-ctas { isolation: isolate; }
.bf-glow.is-on { animation: bf-glow 4s ease-in-out 3; }
@keyframes bf-glow { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 0.85; transform: scale(1.04); } }
.bf-form { width: 100%; max-width: 520px; margin-top: 40px; text-align: left; }
.bf-form-title { font-weight: 500; margin-bottom: 10px; }
.bf-form-row { display: flex; gap: 8px; }
.bf-form input[type="email"] { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bf-line); font: 15px 'Inter', sans-serif; background: #fff; color: var(--bf-ink); transition: border-color var(--motion-instant) var(--ease-standard), box-shadow var(--motion-instant) var(--ease-standard); }
.bf-form input[type="email"]:focus { outline: none; border-color: var(--bf-accent); box-shadow: 0 0 0 3px rgba(5, 136, 240, 0.2); }
.bf-form-dark input[type="email"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.bf-form-dark input::placeholder { color: rgba(255, 255, 255, 0.45); }
.bf-form-msg { margin-top: 8px; font-size: 13px; color: var(--bf-muted); }
.bf-form-dark .bf-form-msg { color: rgba(255, 255, 255, 0.6); }
.bf-form-msg.is-error { color: var(--bf-red); }
.bf-form-msg.is-success { color: var(--bf-green); }
.bf-form-dark .bf-form-msg.is-success { color: #4ADE80; }
.bf-form.is-shake .bf-form-row { animation: bf-shake 300ms var(--ease-standard); }
@keyframes bf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.bf-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bf-spin 700ms linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bf-check-draw { width: 18px; height: 18px; }
.bf-check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: bf-draw 400ms var(--ease-spring) forwards; }
@keyframes bf-draw { to { stroke-dashoffset: 0; } }
.bf-ended-form { margin-top: 28px; }

/* Confetti */
.bf-confetti { position: fixed; z-index: 120; pointer-events: none; width: 0; height: 0; }
.bf-confetti :is(i, svg) { position: absolute; left: 0; top: 0; display: block; animation: bf-burst 1050ms both; }
@keyframes bf-burst {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1); }
  40% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * 0.5)); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15); }
  100% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--fall))) rotate(var(--r)); opacity: 0; }
}

/* Mobile sticky bar */
.bf-sticky { display: none; }

/* Popups (desktop only) */
.bf-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 10, 0.5); animation: bf-fade 200ms var(--ease-standard); }
.bf-pop { position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.45); animation: bf-pop-in 320ms var(--ease-enter); }
@keyframes bf-pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bf-pop.is-leaving { animation: bf-pop-out 200ms var(--ease-exit) forwards; }
@keyframes bf-pop-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.98); } }
.bf-pop h2 { font-size: 30px; line-height: 1.15; }
.bf-pop-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #F2F2F3; cursor: pointer; z-index: 2; }
.bf-pop-close-light { background: rgba(255, 255, 255, 0.18); color: #fff; }
.bf-pop-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--phase-ink); margin-bottom: 10px; }
.bf-pop-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.bf-pop-v1 { display: grid; grid-template-columns: 1fr 220px; overflow: hidden; }
.bf-pop-v1 .bf-pop-body { padding: 32px; }
.bf-pop-v1 .bf-pop-body > p { margin-top: 10px; color: var(--bf-muted); font-size: 15px; }
.bf-punch-meta { display: flex; justify-content: space-between; margin-top: 18px !important; font-size: 12px !important; }
.bf-punch-meta span:last-child { color: var(--phase); }
.bf-punch { display: grid; grid-template-columns: repeat(21, 1fr); gap: 4px; list-style: none; margin-top: 8px; }
.bf-punch li { aspect-ratio: 1; border-radius: 50%; background: var(--bf-accent); }
.bf-punch li.is-used { background: #E5E5E5; }
.bf-punch li.is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--phase); animation: bf-punch 400ms var(--ease-spring) 300ms both; }
@keyframes bf-punch { from { transform: scale(0); } to { transform: none; } }
.bf-pop-stub { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 28px 22px; background: linear-gradient(160deg, #0A84FF, #0466C8); color: #fff; border-left: 2px dashed rgba(255, 255, 255, 0.5); animation: bf-stub 600ms var(--ease-enter) both; }
@keyframes bf-stub { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.bf-pop-stub-k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; margin-top: 10px; }
.bf-pop-stub-num { font-size: 64px; line-height: 1; font-weight: 500; }
.bf-pop-stub-time { font: 600 15px ui-monospace, Menlo, monospace; }
.bf-pop-v4 { left: auto; top: auto; right: 24px; bottom: 24px; transform: none; width: 360px; padding: 20px; border: 1px solid var(--bf-line); animation: bf-toast 320ms var(--ease-enter); }
@keyframes bf-toast { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bf-pop-v4.is-leaving { animation: bf-toast-out 200ms var(--ease-exit) forwards; }
@keyframes bf-toast-out { to { opacity: 0; transform: translateY(12px) scale(0.9); } }
.bf-pop-v4 h2 { font-size: 18px; padding-right: 28px; }
.bf-pop-v4 .bf-pop-close { top: 10px; right: 10px; width: 28px; height: 28px; }
.bf-v4-calc { margin-top: 10px; font-size: 13px; color: var(--bf-muted); }
.bf-v4-calc strong { font-size: 22px; color: var(--bf-ink); font-weight: 500; }
.bf-v4-calc span { display: block; }
.bf-v4-bar { display: block; height: 3px; margin-top: 14px; border-radius: 999px; background: #EDEDED; overflow: hidden; }
.bf-v4-bar span { display: block; height: 100%; background: var(--phase); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform 1s linear; }
.bf-pop-v4 .bf-pop-actions { margin-top: 14px; }
.bf-pop-pill { position: fixed; right: 24px; bottom: 24px; z-index: 99; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bf-line); background: #fff; font: 500 14px 'Inter', sans-serif; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.3); cursor: pointer; animation: bf-toast 320ms var(--ease-enter); }
.bf-pop-v5 { width: min(520px, calc(100vw - 48px)); overflow: hidden; }
.bf-v5-head { padding: 28px 28px 24px; text-align: center; color: #fff; background: radial-gradient(100% 120% at 50% 0%, #F0444B, #B4232A); }
.bf-v5-head .bf-pop-kicker { color: rgba(255, 255, 255, 0.8); }
.bf-v5-when { margin-top: 6px; font-size: 14px; opacity: 0.85; }
.bf-tiles-pop { justify-content: center; margin-top: 16px; }
.bf-tiles-pop .bf-tile { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.2); }
.bf-tiles-pop .bf-tile-s { background: #fff; } .bf-tiles-pop .bf-tile-s b { color: var(--bf-red-strong); } .bf-tiles-pop .bf-tile-s small { color: var(--bf-red-strong); }
.bf-tiles-pop .bf-tile-s.is-flash { animation: bf-flash 400ms var(--ease-standard); }
@keyframes bf-flash { 0% { background: var(--bf-red); } 100% { background: #fff; } }
.bf-v5-body { padding: 22px 28px 20px; text-align: center; }
.bf-v5-prices { display: flex; justify-content: center; gap: 32px; }
.bf-v5-prices small { display: block; color: var(--bf-muted); font-size: 12px; }
.bf-v5-prices strong { font-size: 30px; font-weight: 500; }
.bf-v5-prices s { color: var(--bf-faint); }
.bf-v5-note { margin: 8px 0 16px; font-size: 13px; color: var(--bf-muted); }
.bf-v5-form { margin-top: 18px; max-width: none; text-align: center; }
.bf-v5-or { font-size: 13px; color: var(--bf-muted); margin-bottom: 8px; }
.bf-v5-form .bf-btn { height: 48px; }
.bf-v5-body > .bf-link-btn { margin-top: 6px; }

/* Scroll reveals */
.bf-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); }
.bf-reveal.is-in { opacity: 1; transform: none; }
.no-js .bf-reveal { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .bf-wrap { padding: 0 40px; }
  .bf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
  .bf-ticket-num { font-size: 112px; }
  .bf-uses, .bf-newtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-plan:nth-child(2) { border-right: 0; }
  .bf-plan:nth-child(-n+2) { border-bottom: 1px solid var(--bf-line); }
  .bf-plan-perks { grid-template-columns: repeat(2, 1fr); }
  .bf-finder { grid-template-columns: 1fr 1fr; }
  .bf-finder-intro { grid-column: 1 / -1; }
  .bf-sync { grid-template-columns: 1fr; gap: 20px; }
  .bf-sync-col { grid-template-columns: 1fr 1fr; }
  .bf-sync-label { grid-column: 1 / -1; }
  .bf-sync-item::after { display: none; }
  .bf-mcpx { grid-template-columns: 1fr; }
  .bf-mcpx-left { border-right: 0; border-bottom: 1px solid var(--bf-line); }
  .bf-allcaps-grid { grid-template-columns: 1fr 1fr; }
  .bf-menu-chip { display: none; }
}

@media (max-width: 960px) {
  :root { --bf-nav-h: 64px; }
  .bf-hero-grid { grid-template-columns: 1fr; }
  /* Figma mobile order: badge, headline, copy, deal ticket, calculator, buttons */
  .bf-hero-grid { gap: 0; }
  .bf-hero-copy { display: contents; }
  .bf-badge { order: 1; justify-self: start; }
  .bf-hero-title { order: 2; }
  .bf-hero-sub { order: 3; }
  .bf-ticket { order: 4; max-width: 560px; width: 100%; margin-top: 28px; }
  .bf-calc { order: 5; }
  .bf-ctas { order: 6; }
  .bf-reassure { order: 7; }
  .bf-ended-form, .bf-hero-form { order: 8; }
  .bf-hero { padding-top: 40px; }
  .bf-why, .bf-stack { grid-template-columns: 1fr; }
  .bf-sum, .bf-allofit { grid-template-columns: 1fr; }
  .bf-split-head, .bf-how, .bf-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .bf-phases { grid-template-columns: 1fr 1fr; }
  .bf-mcp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .bf-three { grid-template-columns: 1fr; gap: 20px; }
  /* Axis labels in a 2 x 2 grid: kept to the timeline's proportions they collide below ~960px */
  .bf-meter-axis { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .bf-meter-axis span:nth-child(even) { text-align: right; }
  .bf-menu .bf-btn { display: none; }
}

/* ---------- Tablet portrait: one centred hero column instead of a left-heavy stack with an empty right side ---------- */
@media (min-width: 641px) and (max-width: 960px) {
  .bf-hero-grid { max-width: calc(640px + 80px); }
  .bf-hero .bf-ticket, .bf-hero .bf-calc, .bf-hero .bf-hero-form, .bf-hero .bf-ended-form { max-width: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .bf-wrap { padding: 0 16px; }
  /* Section titles flow and balance on phones instead of keeping desktop line breaks (each <br> has a space before it) */
  .bf h2 br { display: none; }
  .bf-section { padding: 72px 0; }
  .bf-head { margin-bottom: 36px; }
  .bf-head p, .bf-split-head p, .bf-lead { font-size: 16px; }
  .bf-salebar { font-size: 13px; }
  .bf-salebar-inner { gap: 8px 12px; padding: 8px 16px; }
  .bf-salebar-text .bf-grad { display: none; }
  .bf-salebar-link { display: none; }
  .bf-chip-label > span { font-size: 12px; }
  /* Handoff decision 12: the badge wraps instead of clipping in a 358px column. */
  .bf-badge { flex-wrap: wrap; border-radius: 16px; row-gap: 6px; padding: 6px 14px 8px 6px; }
  /* Tag on the first line, the sentence on its own line below it; the whole badge is the link, so the arrow can go */
  .bf-badge-text { white-space: normal; flex: 1 1 100%; padding-left: 6px; }
  .bf-badge > svg { display: none; }
  .bf-badge-timer { border-left: 0; padding-left: 0; }
  .bf-hero-title { margin: 20px 0 14px; }
  .bf-hero-sub { font-size: 16px; }
  .bf-ticket { padding: 20px; border-radius: 18px; }
  .bf-ticket-num { font-size: 96px; }
  .bf-ticket-pct { font-size: 40px; margin-top: 8px; }
  .bf-ticket-pct small { font-size: 24px; }
  .bf-ticket-prices strong { font-size: 28px; }
  .bf-ticket-prices small { display: none; }
  .bf-ticket-foot { flex-direction: column; align-items: flex-start; }
  .bf-coupon { text-align: left; }
  .bf-ticket-foot > div { width: 100%; }
  .bf-tile { min-width: 0; flex: 1; }
  .bf-tiles { width: 100%; }
  .bf-calc-row { gap: 10px; }
  .bf-seg { margin-left: 0; }
  .bf-calc-result { flex-direction: column; align-items: flex-start; }
  .bf-ctas .bf-btn { width: 100%; }
  .bf-reassure { gap: 6px 14px; font-size: 13px; }
  .bf-strip-inner { gap: 14px; flex-direction: column; align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
  .bf-menu-inner { min-height: 52px; }
  .bf-why-tag { display: none; }
  .bf-stack-card { padding: 22px 18px; }
  .bf-tools { margin-bottom: 28px; }
  .bf-sync-col { grid-template-columns: 1fr; }
  .bf-mini-table th:nth-child(4), .bf-mini-table td:nth-child(4) { display: none; }
  .bf-industries { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: -12px -16px 28px; padding: 0 16px; scrollbar-width: none; }
  .bf-industries li > * { white-space: nowrap; }
  /* Use cases swipe on mobile (Figma "Use cases (swipe)") */
  .bf-uses, .bf-newtiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .bf-use { scroll-snap-align: start; }
  .bf-mcpx { border-radius: 18px; }
  .bf-mcpx-left { padding: 24px 18px; }
  .bf-mcpx-title { font-size: 21px; }
  .bf-mcpx-tpl { padding: 14px; gap: 12px; }
  .bf-mcpx-grid { grid-template-columns: 1fr; }
  .bf-mcpx-right { grid-template-columns: 1fr; padding: 20px 16px; }
  .bf-mcpx-net { align-self: auto; }
  .bf-mcpx-net::before, .bf-mcpx-net::after, .bf-mcpx-links, .bf-mcpx-hub { display: none; }
  .bf-mcpx-apps { width: 100%; grid-template-columns: 1fr 1fr; grid-auto-rows: 60px; gap: 8px; }
  .bf-allcaps-grid { grid-template-columns: 1fr; }
  .bf-allcaps summary { flex-direction: column; align-items: flex-start; }
  .bf-table th, .bf-table td { padding: 12px; font-size: 14px; }
  .bf-cmp .bf-table thead th:nth-child(2), .bf-cmp .bf-table td:nth-child(2) { display: none; }
  .bf-table-plans thead th:nth-child(5), .bf-table-plans tbody :is(th, td):nth-child(5) { display: none; }
  .bf-table-plans .bf-tag { white-space: nowrap; }
  .bf-table-plans thead th small { display: block; font-size: 10px; line-height: 1.35; letter-spacing: 0.02em; }
  .bf-pricing-head { align-items: flex-start; }
  .bf-billing { width: 100%; }
  .bf-billing button { flex: 1; justify-content: center; }
  .bf-phasebar { flex-wrap: wrap; font-size: 13px; }
  .bf-phasebar-day { width: 100%; justify-content: space-between; }
  .bf-plans { grid-template-columns: 1fr; border: 0; background: transparent; gap: 14px; }
  .bf-plan { border: 1px solid var(--bf-line) !important; border-radius: var(--bf-radius); background: #fff; }
  .bf-plan-featured { outline-offset: -1px; order: -1; }
  .bf-plan { display: flex; grid-row: auto; }
  .bf-plan-top .bf-plan-fine { min-height: 0; }
  .bf .bf-plan-top .bf-plan-fine[hidden] { display: none !important; }
  .bf-plan-top { min-height: 0; }
  .bf-plan-top .bf-btn { margin-top: 16px; }
  .bf-plan-perks { grid-template-columns: 1fr; border: 0; background: transparent; margin-top: 8px; }
  .bf-plan-perks li { padding: 6px 0; }
  .bf-finder { grid-template-columns: 1fr; padding: 20px; }
  .bf-meter { padding: 18px; }
  .bf-meter-title { font-size: 18px; }
  .bf-meter-days { gap: 2px; }

  .bf-phases { grid-template-columns: 1fr; }
  .bf-steps { grid-template-columns: 1fr; margin: 24px 0; }
  .bf-mcp-steps { grid-template-columns: 1fr; gap: 0; overflow: visible; margin-bottom: 32px; }
  .bf-mcp-steps li { padding: 14px 0; border-top-width: 1px; }
  .bf-mcp-steps li:first-child { border-top-width: 2px; }
  .bf-fit { grid-template-columns: 1fr; }
  .bf-faq-grid { gap: 20px; }
  .bf-final { padding: 72px 0 96px; }
  .bf-tiles-lg .bf-tile { min-width: 0; height: 70px; }
  .bf-tiles-lg .bf-tile b { font-size: 26px; }
  .bf-form-row { flex-direction: column; }
  /* In a column, flex: 1 would turn the 48px height into a 0 basis and collapse the field to one text line */
  .bf-form input[type="email"] { flex: none; }
  .bf-form-row .bf-btn { width: 100%; }

  .bf-sticky { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.96); border: 1px solid color-mix(in srgb, var(--phase) 40%, var(--bf-line)); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); transform: translateY(calc(100% + 24px)); transition: transform 200ms var(--ease-exit); }
  .bf-sticky.is-on { transform: none; transition: transform 320ms var(--ease-enter); }
  .bf-sticky-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--phase-ink); }
  .bf-sticky-label [data-bf-timer] { font-family: ui-monospace, Menlo, monospace; color: var(--bf-ink); font-weight: 600; }
}

/* Reduced motion: final state of every animation, no loops, no confetti. */
@media (prefers-reduced-motion: reduce) {
  .bf *, .bf *::before, .bf *::after { animation: none !important; transition-duration: 120ms !important; transition-delay: 0ms !important; }
  .bf-reveal, .bf-reveal * { opacity: 1 !important; transform: none !important; }
  .bf-strike::after { transform: scaleX(1) !important; }
  .bf-meter-days li { transform: none !important; }
  .bf-glow { opacity: 0.5; }
  .bf-pop, .bf-pop-v4 { animation: bf-fade 120ms linear !important; }
  .bf-confetti { display: none; }
  html:has(.bf) { scroll-behavior: auto; }
}

.bf-split-head h2 { font-size: clamp(32px, 3.6vw, 48px); }
.bf[data-phase="ended"] .bf-hero-grid { grid-template-columns: minmax(0, 720px); }

/* bfcm/state: nothing price-, date- or timer-shaped shows before the first answer. */
.bf:not([data-ready]) .bf-needs-state,
.bf:not([data-ready]) [data-bf-timer],
.bf:not([data-ready]) [data-bf-chip] { visibility: hidden; }
.bf-ticket-monthly { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.bf-order-note { display: block !important; font-size: 12px; color: var(--bf-muted); margin: -8px 0 16px; }
.bf-hero-form { margin-top: 28px; max-width: 560px; }
.bf-form-row[hidden] { display: none; }
.bf-ticket-prices small { display: block; margin-top: 2px; }

/* Touch screens: controls reach a 40px tap height (segmented switches, seat stepper, code chips, section menu) */
@media (pointer: coarse) {
  .bf-seg button { height: 38px; }
  .bf-codechip { min-height: 40px; }
  .bf-menu-links a { padding-top: 10px; padding-bottom: 10px; }
}