/*
 * Black Friday layer for the landing. Every rule is scoped to a class that only
 * assets/bf26.js creates (or to .bf-priced, which it adds), so with no campaign
 * this file styles nothing. Colours come from the --bf-* tokens in tokens.css.
 */
@keyframes bf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bf-sweep { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes bf-ripple { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.6); opacity: 0; } }
@keyframes bf-ring { 0% { box-shadow: 0 0 0 0 var(--bf-edge); } 100% { box-shadow: 0 0 0 var(--bf-s8) transparent; } }

/* ---- Announcement bar: fixed above the fixed header ----------------------- */
.bf-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-s16);
  min-height: 58px;
  padding: var(--bf-s8) var(--bf-s56) var(--bf-s8) var(--bf-s16);
  /* artwork, a veil that keeps the middle readable, then the base colour */
  background:
    linear-gradient(90deg, transparent 0%, var(--bf-veil) 24%, var(--bf-veil) 76%, transparent 100%),
    url(/assets/bf26-banner.svg) center / cover no-repeat,
    var(--bf-surface);
  border-bottom: 1px solid var(--bf-line);
  font-size: 13px;
  line-height: 1.3;
  color: var(--bf-fg);
  animation: bf-in var(--dur-base) ease-out both;
}
.bf-bar::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--bf-hair); transform-origin: left; animation: bf-sweep var(--dur-ambient) var(--bf-ease) var(--dur-fast) both; pointer-events: none; }
.bf-bar p { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--bf-s2) var(--bf-s12); margin: 0; min-width: 0; }
.bf-bar strong { font-weight: 600; }
.bf-sub { color: var(--bf-muted); }
.bf-dot { position: relative; flex: none; width: 8px; height: 8px; margin: 0 var(--bf-s6); border-radius: var(--radius-full); background: var(--bf-accent); }
.bf-dot::before, .bf-dot::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); border: 1.5px solid var(--bf-edge); opacity: 0; animation: bf-ripple var(--bf-ripple) var(--bf-ease) infinite; }
.bf-dot::after { animation-delay: calc(var(--bf-ripple) / 2); }
.bf-cd { display: inline-flex; align-items: center; flex: none; gap: var(--bf-s10); padding: var(--bf-s8) var(--bf-s16) var(--bf-s8) var(--bf-s12); border: 1px solid var(--bf-edge); border-radius: var(--radius-full); background: var(--bf-pill); box-shadow: var(--bf-inner), var(--bf-glow); font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--bf-fg); white-space: nowrap; }
.bf-page > .bf-cd { display: block; padding: 0; border: 0; background: none; box-shadow: none; text-transform: none; letter-spacing: 0; color: var(--bf-muted); }
.bf-cd .bf-dot { margin: 0 var(--bf-s2) 0 0; background: var(--bf-hi); }
.bf-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--bf-s6);
  flex: none;
  padding: var(--bf-s4) var(--bf-s12);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--bf-solid-fg);
  background: linear-gradient(180deg, var(--bf-hi), var(--bf-accent));
  box-shadow: var(--bf-inner), var(--bf-glow);
  text-decoration: none;
  transition: box-shadow var(--dur-moderate) var(--bf-ease), transform var(--dur-moderate) var(--bf-ease);
}
.bf-cta::after { content: "\2192"; display: inline-block; transition: transform var(--dur-moderate) var(--bf-ease); }
.bf-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 32%, var(--bf-inner-glint) 50%, transparent 68%); transform: translateX(-130%); }
.bf-cta:hover::before { transform: translateX(130%); transition: transform var(--dur-long) var(--bf-ease); }
.bf-cta:hover::after { transform: translateX(3px); }
.bf-cta:hover { background: linear-gradient(180deg, var(--bf-hi), var(--bf-accent)); filter: brightness(1.04); }
.bf-cta:active { transform: scale(0.97); }
.bf-bar button {
  position: absolute;
  top: 50%;
  right: var(--bf-s14);
  translate: 0 -50%;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  color: var(--bf-fg);
  background: var(--bf-veil);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
}
.bf-bar button:hover { background: var(--bf-tint); color: var(--bf-fg); }
.bf-bar a:focus-visible, .bf-bar button:focus-visible,
.bf-badge:focus-visible, .bf-cta:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }

html.bf-on body { padding-top: var(--bf-bar-h, 0); }
html.bf-on #main-header { top: var(--bf-bar-h, 0); }

@media (max-width: 1100px) { .bf-sub { display: none; } }

@media (max-width: 640px) {
  /* Pill and close on the first line, headline and offer link on the second. */
  .bf-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cd x" "text cta"; justify-items: start; column-gap: var(--bf-s10); row-gap: var(--bf-s6); min-height: 68px; padding: var(--bf-s8) var(--bf-s12); background-position: 10% center; background-size: auto 100%; }
  .bf-bar .bf-cd { grid-area: cd; padding: var(--bf-s6) var(--bf-s12) var(--bf-s6) var(--bf-s10); gap: var(--bf-s8); font-size: 10.5px; }
  .bf-bar p { grid-area: text; display: block; max-width: 100%; }
  .bf-bar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bf-bar .bf-cta { grid-area: cta; padding: var(--bf-s4) 0; background: none; box-shadow: none; color: var(--bf-hi); text-decoration: underline; text-underline-offset: 3px; }
  .bf-bar .bf-cta::before { display: none; }
  .bf-bar button { position: static; grid-area: x; justify-self: end; translate: none; }
}

/* ---- Badges ---------------------------------------------------------------- */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-s6);
  height: 22px;
  padding: 0 var(--bf-s9);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  animation: bf-in var(--dur-base) ease-out both;
  transition: background-color var(--duration-fast) ease-out;
}
.bf-badge--primary { color: var(--bf-solid-fg); background: linear-gradient(180deg, var(--bf-hi), var(--bf-accent)); box-shadow: var(--bf-inner), var(--bf-glow); }
.bf-badge--primary::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--bf-solid-fg); opacity: 0.55; }
a.bf-badge--primary:hover { background: linear-gradient(180deg, var(--bf-accent), var(--bf-deep)); transform: translateY(-1px); }
.bf-badge--discount { height: 24px; padding: 0 var(--bf-s10); font-size: 11px; letter-spacing: 0.04em; color: var(--bf-hi); background: linear-gradient(180deg, var(--bf-edge), var(--bf-tint)); border-color: var(--bf-edge); box-shadow: var(--bf-inner), var(--bf-glow); }
.bf-hero { margin: 0 0 var(--bf-s12); }

/* ---- Pricing cards -------------------------------------------------------- */
.bf-priced { position: relative; box-shadow: inset 0 1px 0 var(--bf-edge); }
.bf-priced .bf-list { margin-right: var(--bf-s8); font-size: 0.6em; font-weight: 500; color: var(--bf-muted); text-decoration-color: var(--bf-edge); text-decoration-thickness: 1.5px; }
.bf-priced [data-plan-equivalent], .bf-priced [data-plan-estimate] { display: none !important; }
.bf-note { margin: var(--bf-s10) 0 0; padding-top: var(--bf-s10); border-top: 1px solid var(--bf-line); font-size: 12.5px; line-height: 1.45; color: var(--bf-muted); font-variant-numeric: tabular-nums; }

/* ---- FAQ -------------------------------------------------------------------- */
.bf-faq { animation: bf-in var(--dur-moderate) var(--bf-ease) both; }

/* ---- Sale seal and per-month chip on the price cards ------------------------ */
@keyframes bf-pop { from { transform: scale(0.4) rotate(34deg); opacity: 0; } to { transform: scale(1) rotate(9deg); opacity: 1; } }
@keyframes bf-glint { from { background-position: 135% 0; } to { background-position: -35% 0; } }
.bf-seal {
  position: absolute;
  top: -18px;
  right: -14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  background: url(/assets/bf26-seal.svg) center / contain no-repeat;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--bf-seal-ink);
  font-variant-numeric: tabular-nums;
  transform: rotate(9deg);
  animation: bf-pop var(--dur-long) var(--bf-ease) var(--dur-fast) both;
  pointer-events: none;
}
.bf-seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(115deg, transparent 38%, var(--bf-inner-glint) 50%, transparent 62%) 135% 0 / 250% 100% no-repeat;
  animation: bf-glint var(--dur-ambient) var(--bf-ease) var(--dur-long) 1 both;
}
/* The carousel scrolls sideways, so it clips vertically too: give the part of the seal that hangs above a card some headroom, and pull the grid back up so the cards stay where they were. */
.pricing-grid.pricing-grid:has(.bf-seal) { padding-top: calc(var(--space-1) + var(--bf-s28)); margin-top: calc(var(--bf-s28) * -1); }
/* BEST OFFER keeps its row and steps left of the seal. */
.bf-priced:has(.bf-seal) .pricing-best-offer { right: var(--bf-s88); }
.bf-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 24px;
  margin-left: var(--bf-s8);
  padding: 0 var(--bf-s10);
  border: 1px solid var(--bf-line);
  border-radius: var(--radius-full);
  background: var(--bf-chip);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--bf-fg);
  white-space: nowrap;
}

/* ---- Inline Black Friday sale -------------------------------------------- */
.bf-deal {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--bf-s28);
  max-width: 1040px;
  margin: 0 auto var(--bf-s72);
  padding: var(--bf-s28) var(--bf-s56) var(--bf-s28) var(--bf-s28);
  border: 1px solid var(--bf-line);
  border-radius: var(--radius-panel);
  background: var(--bf-surface);
}
.bf-deal__art { width: 100%; min-height: 340px; background: url(/assets/bf26-tag.svg) center / contain no-repeat; }
.bf-deal__copy { display: grid; justify-items: center; gap: var(--bf-s20); min-width: 0; text-align: center; }
.bf-deal h2 { margin: 0; color: var(--bf-accent); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.bf-deal__sub { margin: 0; color: var(--bf-fg); font-size: 16px; line-height: 1.6; }
.bf-deal__sub strong { font-weight: 500; }
.bf-deal__clock { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--bf-s10); width: min(100%, 440px); margin-top: var(--bf-s4); }
.bf-deal__clock div { display: grid; justify-items: stretch; gap: var(--bf-s10); min-width: 0; }
.bf-deal__clock b { display: grid; place-items: center; min-width: 0; height: 64px; border-radius: var(--radius-sm); background: var(--bf-deal-clock, var(--surface-highest)); color: var(--bf-fg); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bf-deal__clock small { color: var(--bf-muted); font-size: 14px; line-height: 1.4; }
.bf-deal__clock i { display: grid; place-items: center; height: 64px; color: var(--bf-muted); font-size: 24px; font-style: normal; }
.bf-deal .bf-cta { justify-content: center; width: min(100%, 320px); min-height: 52px; padding: var(--bf-s12) var(--bf-s20); border-radius: var(--radius-sm); background: var(--bf-hi); color: var(--bf-solid-fg); font-size: 16px; font-weight: 650; box-shadow: none; transition: transform var(--dur-base) var(--bf-ease), background-color var(--dur-base) ease-out; }
.bf-deal .bf-cta::before, .bf-deal .bf-cta::after { display: none; }
.bf-deal .bf-cta:hover { background: var(--bf-accent); filter: none; }
.bf-deal .bf-cta:active { transform: scale(0.98); }
.bf-deal__note { margin: calc(var(--bf-s8) * -1) 0 0; color: var(--bf-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 1080px) { .bf-deal { margin-inline: var(--bf-s20); padding: var(--bf-s28); } }
@media (max-width: 720px) {
  .bf-deal { grid-template-columns: minmax(0, 1fr); gap: var(--bf-s12); margin-inline: var(--bf-s16); padding: var(--bf-s20); }
  .bf-deal__art { min-height: 180px; background-size: auto 200px; }
  .bf-deal h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .bf-deal__copy { gap: var(--bf-s16); }
  .bf-deal__clock { gap: var(--bf-s6); }
  .bf-deal__clock b, .bf-deal__clock i { height: 52px; }
  .bf-deal__clock b { font-size: 24px; }
  .bf-deal__clock i { font-size: 18px; }
  .bf-deal__clock small { font-size: 13px; }
}

/* ---- Popup: a modal that opens at most once a day --------------------------- */
@keyframes bf-rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes bf-out { to { opacity: 0; transform: scale(0.98); } }
html.bf-pop-open { overflow: hidden; }
.bf-pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--bf-s16); }
.bf-pop__scrim { position: absolute; inset: 0; background: var(--bf-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bf-in var(--dur-moderate) ease-out both; }
.bf-pop__card {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  width: min(100%, 780px);
  max-height: calc(100vh - var(--bf-s28));
  overflow: auto;
  border: 1px solid var(--bf-edge);
  border-radius: var(--radius-panel);
  background: var(--bf-surface);
  box-shadow: var(--bf-inner), var(--bf-glow), 0 50px 120px -40px var(--bf-edge);
  animation: bf-rise var(--dur-slow) var(--bf-ease) both;
}
.bf-pop.is-out .bf-pop__scrim, .bf-pop.is-out .bf-pop__card { animation: bf-out var(--dur-base) ease-in both; }
.bf-pop__art { align-self: stretch; min-height: 360px; background: url(/assets/bf26-tag.svg) center / contain no-repeat; }
.bf-pop__body { display: grid; justify-items: center; gap: var(--bf-s12); padding: var(--bf-s28) var(--bf-s28) var(--bf-s20) var(--bf-s8); text-align: center; }
.bf-pop h2 { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bf-accent); }
.bf-pop__sub { margin: 0; max-width: 24ch; font-size: 15px; line-height: 1.4; color: var(--bf-fg); }
.bf-pop__clock { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: var(--bf-s6); width: 100%; margin-top: var(--bf-s4); }
.bf-pop__clock div { display: grid; gap: var(--bf-s6); justify-items: center; min-width: 0; }
.bf-pop__clock b { display: grid; place-items: center; width: 100%; height: 52px; border: 1px solid var(--bf-line); border-radius: var(--radius-md); background: var(--bf-chip); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bf-fg); }
@keyframes bf-second-out { from { transform: translateY(0); opacity: 1; filter: blur(0); } to { transform: translateY(0.5em); opacity: 0; filter: blur(2px); } }
@keyframes bf-second-in { from { transform: translateY(-0.5em); opacity: 0; filter: blur(2px); } to { transform: translateY(0); opacity: 1; filter: blur(0); } }
.bf-pop__clock [data-u="s"] { position: relative; overflow: hidden; }
.bf-second-digits { display: inline-flex; width: 2ch; height: 1.2em; line-height: 1.2; }
.bf-second-digit { position: relative; width: 1ch; height: 100%; overflow: hidden; }
.bf-second-old, .bf-second-value { position: absolute; inset: 0; display: grid; place-items: center; }
.bf-second-old { animation: bf-second-out var(--dur-slow) cubic-bezier(0.23, 1, 0.32, 1) both; }
.bf-second-old + .bf-second-value { animation: bf-second-in var(--dur-slow) cubic-bezier(0.23, 1, 0.32, 1) both; }
.bf-pop__clock small { font-size: 11.5px; color: var(--bf-muted); }
.bf-pop__clock i { display: grid; place-items: center; height: 52px; font-style: normal; font-weight: 800; color: var(--bf-fg); }
.bf-pop__offers { display: grid; gap: var(--bf-s8); width: 100%; min-width: 0; }
.bf-pop__offer-controls { display: flex; align-items: center; justify-content: center; gap: var(--bf-s8); min-height: 44px; color: var(--bf-muted); font-size: 13px; }
.bf-pop__cycles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; min-width: 0; padding: var(--bf-s3); border-radius: var(--radius-full); background: var(--bf-chip); }
.bf-pop__cycles button { min-width: 0; min-height: 44px; padding: var(--bf-s6) var(--bf-s8); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--bf-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: color var(--dur-base) ease, background-color var(--dur-base) ease; }
.bf-pop__cycles button[aria-pressed="true"] { background: var(--bf-accent); color: var(--bf-solid-fg); }
.bf-pop__cycles button:hover { color: var(--bf-fg); }
.bf-pop__cycles button[aria-pressed="true"]:hover { color: var(--bf-solid-fg); }
.bf-pop__viewport { width: 100%; min-width: 0; overflow: hidden; border-radius: var(--radius-md); }
.bf-pop__track { display: flex; align-items: stretch; width: 100%; transition: transform var(--dur-slow) var(--bf-ease); }
.bf-pop__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bf-s8); width: 100%; margin: var(--bf-s4) 0 0; padding: 0; list-style: none; }
.bf-pop__track > .bf-pop__plans { flex: 0 0 100%; min-width: 0; }
.bf-pop__plans li { display: grid; justify-items: center; gap: var(--bf-s2); padding: var(--bf-s10) var(--bf-s4); border: 1px solid var(--bf-line); border-radius: var(--radius-md); background: var(--bf-row); font-variant-numeric: tabular-nums; }
.bf-pop__plans b { font-size: 12px; font-weight: 700; text-transform: capitalize; color: var(--bf-muted); }
.bf-pop__plans strong { font-size: 15px; font-weight: 800; color: var(--bf-fg); }
.bf-pop__plans s { font-size: 11.5px; color: var(--bf-muted); text-decoration-color: var(--bf-edge); }
.bf-pop__plans em { margin-top: var(--bf-s2); padding: var(--bf-s2) var(--bf-s8); border: 1px solid var(--bf-edge); border-radius: var(--radius-full); background: var(--bf-tint); font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--bf-hi); }
.bf-pop__note { margin: 0; font-size: 11.5px; color: var(--bf-muted); }
.bf-pop .bf-cta { width: 100%; justify-content: center; padding: var(--bf-s12) var(--bf-s20); font-size: 15px; }
.bf-pop__later { padding: var(--bf-s4) var(--bf-s8); border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--bf-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--duration-fast) ease-out; }
.bf-pop__later:hover { color: var(--bf-fg); }
.bf-pop__x {
  position: absolute;
  top: var(--bf-s12);
  right: var(--bf-s12);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--bf-fg);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease-out;
}
.bf-pop__x:hover { background: var(--bf-tint); }
.bf-pop button:focus-visible, .bf-pop a:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .bf-pop__card { grid-template-columns: minmax(0, 1fr); }
  .bf-pop__art { order: -1; min-height: 150px; align-self: auto; background-size: auto 150%; }
  .bf-pop__body { padding: var(--bf-s4) var(--bf-s20) var(--bf-s20); }
  .bf-pop h2 { font-size: 1.5rem; }
}

/* ---- Notice for a link opened after the offer ended ------------------------ */
.bf-toast {
  position: fixed;
  left: 50%;
  bottom: var(--bf-s28);
  z-index: 70;
  translate: -50% 0;
  padding: var(--bf-s10) var(--bf-s20);
  border: 1px solid var(--bf-edge);
  border-radius: var(--radius-full);
  background: var(--bf-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--bf-inner), var(--bf-glow);
  font-size: 13px;
  font-weight: 600;
  color: var(--bf-fg);
  animation: bf-in var(--dur-moderate) var(--bf-ease) both;
}

/* ---- /black-friday ---------------------------------------------------------- */
.bf-page { max-width: 880px; margin: 0 auto; padding: var(--bf-s128) var(--bf-s20) var(--bf-s72); }
.bf-page h1 { margin: var(--bf-s16) 0 var(--bf-s12); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.bf-page h2 { margin: var(--bf-s56) 0 var(--bf-s16); font-size: 1.5rem; }
.bf-page__lead { max-width: 60ch; margin: 0 0 var(--bf-s12); font-size: 1.0625rem; line-height: 1.55; color: var(--bf-muted); }
.bf-page__table { margin: var(--bf-s28) 0 var(--bf-s20); overflow-x: auto; }
.bf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bf-table th, .bf-table td { padding: var(--bf-s14) var(--bf-s12); text-align: left; vertical-align: middle; white-space: nowrap; }
.bf-table thead th { font-size: 13px; font-weight: 600; text-transform: capitalize; color: var(--bf-muted); }
.bf-table tbody th { font-weight: 700; text-transform: capitalize; }
.bf-table tbody tr { background: var(--bf-row); }
.bf-table tbody tr + tr td, .bf-table tbody tr + tr th { border-top: 8px solid transparent; background-clip: padding-box; }
.bf-table s { color: var(--bf-muted); }
.bf-cta--lg { display: inline-block; padding: var(--bf-s14) var(--bf-s28); font-size: 15px; }
.bf-steps { margin: 0; padding-left: var(--bf-s20); display: grid; gap: var(--bf-s10); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .bf-bar, .bf-bar::after, .bf-badge, .bf-faq, .bf-toast, .bf-dot::before, .bf-dot::after { animation: none; }
  .bf-pop__scrim, .bf-pop__card, .bf-pop.is-out .bf-pop__scrim, .bf-pop.is-out .bf-pop__card { animation: none; }
  .bf-pop__track, .bf-pop__cycles button { transition: none; }
  .bf-second-old { display: none; }
  .bf-second-value { animation: none !important; }
  .bf-seal { animation: none; }
  .bf-deal .bf-cta, .bf-deal .bf-cta::after { transition: none; }
  .bf-deal .bf-cta:hover, .bf-deal .bf-cta:active { transform: none; }
  .bf-deal .bf-cta:hover::after { transform: none; }
  .bf-seal::after { display: none; }
  .bf-cta, .bf-cta::after, .bf-bar button, .bf-badge { transition: none; }
  .bf-cta::before { display: none; }
}