/* Campaign page (/black-friday): loaded only there, after styles.css. Built from the approved Nov 8 mockup: the dark
   campaign poster (duotone photo, outlined BLACK over red FRIDAY, the 3D Jab, static sale tape and tear-off savings
   tickets), offer cards that overlap the poster's foot, the first-timer intro card, and quiet fine print. Markup:
   lib/render/promo.ts. */
.bfc .site-header .bar { background: var(--glass-solid); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }

/* Poster */
.bfc-hero { padding-top: 92px; }
.bfc-poster {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: calc(clamp(28px, 4.4vw, 64px) + 40px) clamp(24px, 5vw, 72px) clamp(96px, 11vw, 168px); border-radius: var(--r-lg); color: var(--near-white); background: #030912;
}
.bfc-photo { position: absolute; inset: 0; z-index: -3; } /* out of the grid flow, so it never takes a column */
.bfc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; filter: grayscale(1) contrast(1.2) brightness(.7); }
.bfc-poster::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--red); mix-blend-mode: multiply; opacity: .7; }
.bfc-poster::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #030912 6%, rgba(3, 9, 18, .72) 48%, rgba(3, 9, 18, .12) 86%), linear-gradient(0deg, rgba(3, 9, 18, .9), transparent 46%); }
.bfc-copy { container-type: inline-size; min-width: 0; }
.bfc-pre { color: #ff8a7d; }
/* Sized to its column: the longest line, "FRIDAY", is 4.63em wide in the display face (measured), so 100cqi / 4.9 leaves a margin. */
.bfc-poster h1 { margin-top: 16px; font-size: min(176px, calc(100cqi / 4.9)); line-height: .84; }
.bfc-poster h1 span { display: block; }
.bfc-poster h1 .r { color: var(--red); }
@supports (-webkit-text-stroke: 1px #000) { .bfc-poster h1 .o { color: transparent; -webkit-text-stroke: max(2px, .018em) var(--near-white); } }
.bfc-lede { margin-top: 18px; max-width: 32ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: #f4f4f4; }
.bfc-when { display: inline-flex; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; padding: 9px 16px; border: 1px solid rgba(255, 210, 204, .32); border-radius: 999px; font-size: 15.5px; font-weight: 600; background: rgba(3, 9, 18, .4); }
.bfc-when .label { color: #ff8a7d; font-size: 11.5px; }
.bfc-jab { position: relative; z-index: 1; width: clamp(130px, 21vw, 300px); height: auto; margin-right: clamp(0px, 3vw, 48px); transform: rotate(-8deg); filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6)); }

/* Sale tape across the top of the poster: static, decorative, the Black Friday "price tag" cue. */
.bfc-tape {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 18px;
  white-space: nowrap; background: var(--red); color: var(--glove); font: 400 16px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
}
.bfc-tape i { font-style: normal; font-size: 12px; opacity: .55; }

/* Cyber Monday rides under the headline: same face, a fraction of the size, so Black Friday stays the event. */
.bfc-cyber { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font: 400 min(40px, calc(100cqi / 12)) / 1 var(--display); /* "+ CYBER MONDAY" is 11.41em (measured) */ text-transform: uppercase; color: var(--near-white); }
.bfc-cm { white-space: nowrap; }
.bfc-plus { color: var(--red); }
/* A slapped-on sticker, in the email's voice. */
.bfc-sticker { display: inline-block; padding: 7px 11px 6px; border-radius: 6px; background: var(--near-white); color: var(--glove); font-size: max(14px, .48em); letter-spacing: .02em; transform: rotate(-4deg); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); }

/* The two deals as tear-off tickets: savings first, each jumps to its card. */
.bfc-deals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding: 0; list-style: none; }
.bfc-deal {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 22px 10px 20px; border-radius: 10px;
  background: var(--red); color: var(--glove); text-decoration: none; transition: transform .15s ease;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
a.bfc-deal:hover, a.bfc-deal:focus-visible { color: var(--glove); transform: translateY(-2px); } /* "plain" on the link opts out of the site's red text-link colour; a.… beats a.plain:hover */
.bfc-deal strong { font: 400 clamp(30px, 3.4vw, 42px) / .9 var(--display); text-transform: uppercase; white-space: nowrap; }
.bfc-deal > span { padding-left: 14px; border-left: 2px dashed rgba(3, 9, 18, .45); font-size: 15px; font-weight: 700; line-height: 1.2; }
.bfc-deal small { display: block; margin-top: 2px; font: 400 11px/1.2 var(--label); text-transform: uppercase; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .bfc-deal { transition: none; } a.bfc-deal:hover { transform: none; } }
/* The notch mask would clip a focus ring on the ticket itself, so keyboard focus is drawn on its list item. */
.bfc-deals li { border-radius: 12px; }
a.bfc-deal:focus-visible { outline: none; }
.bfc-deals li:has(a.bfc-deal:focus-visible) { outline: 3px solid var(--mat); outline-offset: 3px; }

/* Offers: cards of equal weight. Two per row from tablet width; more offers wrap into more rows, or sit under category
   headings when a category has two or more. */
.bfc-group { margin: clamp(28px, 4vw, 44px) clamp(12px, 3.4vw, 48px) 14px; font-size: clamp(26px, 3vw, 36px); }
.bfc-offers { position: relative; z-index: 2; margin-top: clamp(-128px, -8vw, -56px); }
.bfc-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); padding: 0 clamp(12px, 3.4vw, 48px); }
.bfc-card {
  display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 34px 70px -40px rgba(3, 9, 18, .55);
}
.bfc-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bfc-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--glove); color: var(--near-white); }
html[data-theme="dark"] .bfc-tag { background: var(--near-white); color: var(--glove); }
.bfc-kind-note { color: var(--muted); font-size: 15px; font-weight: 600; }
/* The deal block: black, with the saving in red, like the campaign email. The first thing each card says. */
.bfc-save { container-type: inline-size; display: grid; gap: 4px; align-content: start; padding: 16px 20px 18px; border-radius: var(--r-md); background: #05070c; color: var(--near-white); }
html[data-theme="dark"] .bfc-save { background: #000; box-shadow: inset 0 0 0 1px rgba(244, 244, 244, .12); }
.bfc-save-k { font: 400 11.5px/1.2 var(--label); text-transform: uppercase; letter-spacing: .08em; color: #ff8a7d; }
/* "SAVE $190" is 7.11em wide in the display face (measured): sized to the block so it stays on one line. */
.bfc-save-big { margin-top: 2px; font: 400 min(68px, calc(100cqi / 7.5)) / .88 var(--display); white-space: nowrap; text-transform: uppercase; color: var(--red); }
.bfc-save-sub { font-size: 16px; font-weight: 700; }
.bfc-math { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 14px; font-weight: 600; }
.bfc-math span { padding: 5px 11px; border: 1px solid rgba(244, 244, 244, .28); border-radius: 999px; }
.bfc-math b { color: var(--red); font-weight: 700; }
.bfc-save-then { margin-top: 6px; font-size: 15px; font-weight: 600; color: #c9c3ae; }
.bfc-card h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: .94; }
.bfc-card h3 em { font-style: normal; color: var(--red); }

.bfc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.bfc-big strong { font: 400 clamp(54px, 5.6vw, 80px)/.9 var(--display); letter-spacing: -.01em; }
.bfc-big s { font: 400 clamp(30px, 3vw, 42px) / .9 var(--display); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.bfc-big span { font-size: 18px; font-weight: 600; color: var(--muted); }

/* What you get: short points with a red tick, instead of a label/value table. */
.bfc-points { display: grid; gap: 8px; align-content: start; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.bfc-points li { position: relative; padding-left: 26px; }
.bfc-points li::before { content: ""; position: absolute; left: 2px; top: .32em; width: 12px; height: 7px; border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(-45deg); }

/* Actions sit at the foot of each card, so both Buy buttons line up whatever is above them. */
.bfc-buy { width: 100%; align-self: end; gap: 10px; text-align: center; line-height: 1.25; }
.bfc-ext { font-size: 1.1em; line-height: 1; }
/* From tablet width the two cards share one row grid, so the tag, deal block, title, price, points and Buy button sit
   at the same height in both, whatever the text length. 8 rows: 6 shared, the membership's promo code backup, and the
   terms link (always on row 8). Phones stack the cards, so this doesn't apply there. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .bfc-board { row-gap: 0; }
    .bfc-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 16px; margin-bottom: clamp(14px, 2vw, 24px); }
    .bfc-card > .bfc-tlink { grid-row: 8; } /* both terms links on the last row */
  }
}

/* Promo code: a quiet backup under Buy. The Buy link already carries the code (?promocode=BF6X), so this only matters
   if checkout doesn't show it. The code is one small button: tap to copy. No letter-spacing, so it reads as BF6X. */
.bfc-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 2px 0 0; }
.bfc-code-how { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.bfc-code-row {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 3px 3px 3px 12px;
  border: 1px dashed var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.bfc-code-row:hover { border-color: var(--accent-text); }
.bfc-code-row code { font: 500 16px/1 "DMMonoMedium", var(--label); letter-spacing: 0; color: var(--text); user-select: all; -webkit-user-select: all; }
.bfc-copylbl { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; background: var(--line); color: var(--text); font: 400 11px/1 var(--label); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bfc-copylbl svg { width: 13px; height: 13px; }
.bfc-code-row[data-copied] .bfc-copylbl { background: var(--red); color: var(--glove); }

.bfc-tlink { display: inline-flex; align-items: center; gap: 6px; align-self: start; justify-self: start; min-height: 40px; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.bfc-tlink:hover { color: var(--accent-text); }

/* New to Rumble: name, one-line benefit, a clear price, then the button. */
.bfc-new { padding-top: clamp(32px, 5vw, 64px); }
.bfc-newcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3.4vw, 36px); border-radius: var(--r-lg); background: var(--offer-tint); border: 1px solid var(--offer-line); border-left: 3px solid var(--red);
}
.bfc-new-txt { min-width: 0; }
.bfc-newcard .label { color: var(--accent-text); }
.bfc-newcard h2 { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.bfc-new-what { margin-top: 12px; max-width: 48ch; font-size: 17px; line-height: 1.45; }
.bfc-new-txt h2, .bfc-new-what { text-wrap: balance; }
.bfc-new-what strong { display: block; font-size: 18px; }
/* The rule as a tidy block: the tag on the left, the two short lines stacked beside it (hanging indent). */
.bfc-new-who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 12px; margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.bfc-new-rules > span { display: block; text-wrap: pretty; }
/* Makes the one-time, first-timer rule impossible to miss. */
.bfc-once { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--glove); color: var(--near-white); font: 400 11px/1.4 var(--label); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; margin-top: 1px; }
html[data-theme="dark"] .bfc-once { background: var(--near-white); color: var(--glove); }
.bfc-new-price { display: grid; justify-items: center; padding: 0 clamp(0px, 2vw, 24px); border-left: 1px solid var(--offer-line); border-right: 1px solid var(--offer-line); }
.bfc-new-price strong { font: 400 clamp(52px, 5vw, 72px) / .9 var(--display); }
.bfc-new-price span { margin-top: 4px; font: 400 11.5px/1.2 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bfc-newact { display: grid; justify-items: center; gap: 10px; }
.bfc-newact .btn { gap: 10px; }
.bfc-call { font-weight: 600; font-size: 15px; }
.bfc-call a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .bfc-newcard { grid-template-columns: minmax(0, 1fr) auto; }
  .bfc-new-price { border-right: 0; }
  .bfc-newact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
}
@media (max-width: 520px) {
  .bfc-newcard { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 18px; }
  .bfc-new-price { justify-self: start; display: flex; align-items: baseline; gap: 10px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--offer-line); width: 100%; }
  .bfc-new-price strong { font-size: 48px; }
  .bfc-newcard h2 { font-size: 30px; }
  .bfc-new-who { grid-template-columns: minmax(0, 1fr); }
  .bfc-once { justify-self: start; }
  .bfc-newact .btn { flex: 1 1 100%; }
  .bfc-newact { justify-items: stretch; }
  .bfc-call { margin: 0 auto; }
}

/* Terms: fine print, quiet. Three short columns with hairlines, small muted text; the key terms are already on the cards. */
.bfc-fine { padding: clamp(32px, 5vw, 56px) 0 8px; }
.bfc-fine > .wrap > h2 { color: var(--faint); }
.bfc-fine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: 10px; border-top: 1px solid var(--line); }
.bfc-fine-grid > div { min-width: 0; padding-top: 14px; scroll-margin-top: 96px; }
.bfc-fine h3 { font: 400 11.5px/1.3 var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bfc-fine ul { display: grid; gap: 5px; margin-top: 8px; padding-left: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.bfc-fine .bfc-fine-grid a { overflow-wrap: anywhere; color: inherit; font-weight: 600; }
.bfc-fine-grid > div:target h3 { color: var(--accent-text); }
@media (max-width: 900px) { .bfc-fine-grid { grid-template-columns: minmax(0, 1fr); } .bfc-fine-grid > div + div { margin-top: 14px; border-top: 1px solid var(--line); } }

@media (max-width: 900px) {
  .bfc-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bfc-hero { padding-top: 80px; }
  .bfc-poster { grid-template-columns: minmax(0, 1fr); padding-bottom: 88px; }
  .bfc-jab { position: absolute; top: 52px; right: 12px; width: 54px; margin: 0; }
  .bfc-deals li { flex: 1 1 100%; }
  .bfc-deal { flex-wrap: wrap; gap: 4px 12px; padding: 12px 22px 12px 20px; }
  .bfc-deal strong { font-size: min(34px, calc((100cqi - 46px) / 7.3)); } /* "SAVE $190" is 7.11em; the ticket's padding is 42px */
  .bfc-pre { padding-right: 64px; }
  .bfc-when { font-size: 14px; padding: 8px 14px; border-radius: 14px; }
  .bfc-poster h1 { margin-top: 34px; } /* clears the jab in the corner */
  .bfc-photo img { object-position: 70% 30%; }
  .bfc-poster::after { background: linear-gradient(180deg, rgba(3, 9, 18, .55), rgba(3, 9, 18, .8) 55%, #030912); }
  .bfc-offers { margin-top: -56px; }
  .bfc-board { padding: 0 8px; }
  .bfc-card { padding: 20px 16px 10px; gap: 14px; }
  .bfc-save { padding: 14px 16px 16px; }
  .bfc-math { font-size: 13px; gap: 6px; }
  .bfc-math span { padding: 4px 9px; }
  .bfc-big strong { font-size: 52px; }
  .bfc-big s { font-size: 28px; }
  .bfc-big span { font-size: 16px; }
  /* Keeps "Unlock my Black Friday deal" on one line down to ~375px; narrower phones wrap it, centred. */
  .bfc-buy { padding: 8px 14px; font-size: 13px; letter-spacing: .03em; }
}

/* Ended state: same poster, cooled down; the metal Jab marks the change. */
.bfc-poster.ended { padding-top: clamp(28px, 5vw, 72px); padding-bottom: clamp(32px, 5vw, 72px); }
.bfc-poster.ended::before { background: #a59c8b; opacity: .5; }
/* "THAT'S" (4.60em) is the longest word; lines wrap between words, so nothing can run past the panel. */
.bfc-poster.ended h1 { font-size: min(132px, calc(100cqi / 4.9)); }
.bfc-endact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bfc-ghost { border-color: #c9c3ae; color: #f4f4f4; }
.bfc-ghost:hover { color: #fff; border-color: #fff; }
.bfc-spacer { height: clamp(40px, 6vw, 80px); }
@media (max-width: 640px) { .bfc-endact .btn { flex: 1 1 100%; } .bfc-poster.ended { padding-bottom: 32px; } .bfc-poster.ended .bfc-jab { top: 12px; } }