/* ══════════════════════════════════════════════════════════════════════════
   BLACKFRIDAY.CSS — Black Friday landing page
   Live: /css/pages/blackfriday.css, loaded after /css/fonts.css and
   /css/common.css, the same way every other page stylesheet is.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   PART 1 · SHARED DESIGN SYSTEM — not specific to this page
   common.css has no tokens, reset, navigation or footer: on the live site
   every page stylesheet carries its own copy of them. The rules below are
   the ones pages/plans.css and pages/block.css define word for word,
   limited to what this page uses. Do not edit them here alone — they have
   to stay identical across all page stylesheets.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Base: reset, tokens, typography ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --red: #E63946;
  --red-hover: #CF2F3C;
  --red-soft: #FFF1F2;
  --red-glow: rgba(230, 57, 70, 0.1);
  --dark: #1D1D1F;
  --text: #3A3A3C;
  --text-soft: #636366;
  --text-muted: #6E6E73;
  --bg: #FAFAFA;
  --card: #FFF;
  --cream: #F5F2EE;
  --cream-deep: #EDE8E2;
  --mint: #E8F5F0;
  --mint-dark: #2D9F7F;
  --sky: #EBF3FF;
  --sky-dark: #4A90D9;
  --peach: #FFF3EB;
  --peach-dark: #E8834A;
  --border: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.08);
  --radius: 20px;
  --cream-tex: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.018) 39px, rgba(0,0,0,.018) 40px), var(--cream);
  --cream-tex-size: auto;
}
:root.tex-grid {
  --cream-tex: repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,.018) 39px, rgba(0,0,0,.018) 40px), repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.018) 39px, rgba(0,0,0,.018) 40px), var(--cream);
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Sora', sans-serif; color: var(--dark); line-height: 1.15; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: none; }

/* ── Navigation ── */
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.logo { display: flex; align-items: center; gap: 4px; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  text-decoration: none;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--dark); }
.nav-links a.active { color: var(--red); font-weight: 600; }
.nav-links .hot {
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: top;
  letter-spacing: 0.5px;
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-right: 4px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2.2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-lc { position: relative; }
.nav-lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .18s;
  font-family: 'Outfit', sans-serif;
  border-radius: 8px;
}
.nav-lc-globe { color: var(--text-muted); transition: color .18s; }
.nav-lc-lang { font-size: 13.5px; font-weight: 700; color: var(--dark); line-height: 1.1; text-align: left; }
.nav-lc-curr { font-size: 10.5px; color: var(--text-muted); font-weight: 500; letter-spacing: .3px; }
.nav-lc-chev { opacity: .35; transition: transform .2s, opacity .18s; flex-shrink: 0; }
@media (hover: hover) {
  .nav-lc-btn:hover, .nav-lc:hover .nav-lc-btn { background: transparent; }
  .nav-lc-btn:hover .nav-lc-globe, .nav-lc:hover .nav-lc-globe { color: var(--dark); }
  .nav-lc:hover .nav-lc-chev { transform: rotate(180deg); opacity: .65; }
  .nav-lc:hover .nav-lc-drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
}
.nav-lc-drop {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.nav-lc-drop-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  min-width: 210px;
}
.nav-lc.is-open .nav-lc-drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-lc.is-open .nav-lc-btn { background: transparent; }
.nav-lc.is-open .nav-lc-globe { color: var(--dark); }
.nav-lc.is-open .nav-lc-chev { transform: rotate(180deg); opacity: .65; }
.nav-lc-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 6px;
  margin-bottom: 6px;
}
.nav-lc-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.nav-lc-opts:last-child { margin-bottom: 0; }
.nav-lc-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Outfit', sans-serif;
}
.nav-lc-opt:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.nav-lc-opt.active { border-color: var(--red); color: var(--red); background: var(--red-soft); font-weight: 700; }
.nav-lc-divider { height: 1px; background: var(--border); margin: 4px 0 14px; }
.nav-lc2-drop-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-lc2-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 14px 6px;
}
.nav-lc2-group-label:first-child { padding-top: 8px; }
.nav-lc2-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  transition: background .15s, color .15s;
}
.nav-lc2-row:hover { background: var(--red-soft); color: var(--red); }
.nav-lc2-row.active { color: var(--dark); font-weight: 700; }
.nav-lc2-row .nav-lc2-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--text-soft);
}
.nav-lc2-row .nav-lc2-icon svg { width: 18px; height: 18px; }
.nav-lc2-row:hover .nav-lc2-icon { color: var(--red); }
.nav-lc2-row.active .nav-lc2-icon { color: var(--dark); }
.nav-lc2-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 9px 18px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: #F6F3F0;
  text-decoration: none;
  transition: all 0.25s;
  line-height: 1.4;
}
.btn-login:hover { border-color: var(--dark); color: var(--dark); }
.nav-lc { position: relative; }
.nav-lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .18s;
  font-family: 'Outfit', sans-serif;
  border-radius: 8px;
}
.nav-lc-btn:hover, .nav-lc:hover .nav-lc-btn { border-left-color: var(--dark); }
.nav-lc-btn:hover .nav-lc-globe, .nav-lc:hover .nav-lc-globe { color: var(--dark); }
.nav-lc-globe { color: var(--text-muted); transition: color .18s; }
.nav-lc-lang { font-size: 13.5px; font-weight: 700; color: var(--dark); line-height: 1.1; text-align: left; }
.nav-lc-curr { font-size: 10.5px; color: var(--text-muted); font-weight: 500; letter-spacing: .3px; }
.nav-lc-chev { opacity: .35; transition: transform .2s, opacity .18s; flex-shrink: 0; }
.nav-lc:hover .nav-lc-chev { transform: rotate(180deg); opacity: .65; }
.nav-lc-drop {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease .25s, transform .2s ease .25s;
  z-index: 200;
}
.nav-lc-drop-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  min-width: 210px;
}
.nav-lc:hover .nav-lc-drop { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s, 0s; }
.nav-lc-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 6px;
  margin-bottom: 6px;
}
.nav-lc-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.nav-lc-opts:last-child { margin-bottom: 0; }
.nav-lc-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Outfit', sans-serif;
}
.nav-lc-opt:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.nav-lc-opt.active { border-color: var(--red); color: var(--red); background: var(--red-soft); font-weight: 700; }
.nav-lc-divider { height: 1px; background: var(--border); margin: 4px 0 14px; }
@media (max-width: 900px) {
  .nav-burger { display: flex; order: 4; margin: 0; width: 44px; height: 44px; }
  .nav-burger span { width: 24px; height: 2.4px; }
  .logo { order: 1; margin: 0; }
  .logo img { height: 22px !important; }
  .nav-right { display: contents; }
  .btn-login { order: 2; padding: 5px 14px; font-size: 13px; margin-left: auto; }
  .nav-lc { order: 3; }
  .nav-lc-btn { padding: 8px 10px; }
  .nav-lc-globe { width: 22px !important; height: 22px !important; }
  .nav-inner { display: flex; align-items: center; gap: 16px; padding: 0 16px; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  body.menu-open .nav-links { max-height: 480px; padding: 8px 0; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 14px 24px; font-size: 15px; font-weight: 600; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 18px; }
}
@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
  .nav-lc-btn { padding: 4px 6px; gap: 6px; }
  .nav-lc-lang, .nav-lc-curr, .nav-lc-chev { display: none; }
}
.nav-links > li { position: relative; }
.nav-links .has-sub > a { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-links .has-sub > a::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: .5;
  transition: transform .2s;
}
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  padding-top: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 220;
}
.nav-sub-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 170px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-sub a:hover { background: var(--red-soft); color: var(--red); }
.nav-sub a.active { background: var(--red-soft); color: var(--red); font-weight: 600; }
.nav-sub a svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (hover: hover) and (min-width: 901px) {
  .nav-links .has-sub:hover .nav-sub { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .nav-links .has-sub:hover > a::after { transform: rotate(-135deg); margin-top: 3px; opacity: .8; }
  .nav-links .has-sub:hover > a { color: var(--dark); }
}
@media (max-width: 900px) {
  .nav-links .has-sub > a::after { display: none; }
  .nav-sub { position: static; padding-top: 0; opacity: 1; pointer-events: auto; transform: none; }
  .nav-sub-inner {
    background: var(--cream);
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
  }
  .nav-sub a {
    padding: 12px 24px 12px 40px;
    font-size: 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-sub-inner a:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .btn-login { padding: 11px 16px !important; font-size: 14px !important; }
}

/* ── Footer ── */
.fv2 { background: var(--dark); color: rgba(255,255,255,.7); border-top: 3px solid var(--red); }
.fv2-mid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.fv2-brand { padding-right: 56px; }
.fv2-brand img { height: 26px; display: block; margin-bottom: 14px; }
.fv2-brand p {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 460px;
}
.fv2-brand-tp { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fv2-brand-tp .stars { display: flex; gap: 3px; }
.fv2-brand-tp .stars span {
  width: 22px;
  height: 22px;
  background: #00B67A;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fv2-brand-tp .stars svg { width: 14px; height: 14px; fill: white; }
.fv2-brand-tp .label { font-size: 14px; color: rgba(255,255,255,.6); font-weight: 600; transition: color .2s; }
.fv2-brand-tp:hover .label { color: white; }
.fv2-col h4 {
  color: white;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
}
.fv2-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fv2-col a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 14px; transition: color .2s; }
.fv2-col a:hover { color: white; }
.fv2-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.fv2-bottom-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.fv2-bottom-legal a { color: rgba(255,255,255,.4); text-decoration: none; font-size: 12px; }
.fv2-bottom-legal a:hover { color: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .fv2-mid { grid-template-columns: 1fr 1fr; }
  .fv2-brand { padding-right: 0; }
}
@media (max-width: 520px) {
  .fv2-mid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PART 2 · BLACK FRIDAY ONLY
   Everything below exists for this page only. Classes carry the bf- prefix
   so they cannot collide with common.css or another page stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dark page ── */
body.bf-dark { background: #0A0A0B; color: rgba(255,255,255,.72); }
body.bf-dark h1, body.bf-dark h2, body.bf-dark h3 { color: #fff; }
/* ── Section backgrounds ──
   The design system's two section patterns, drawn light on dark with the same
   geometry and strength as on light pages, and alternated down the page:
     grid = .checkout-grid-section (common.css), 40px lines at 2.5%
     dots = .faq-section (common.css),          1px dots every 22px at 5.5%  */
body.bf-dark {
  --bf-grid:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px);
  --bf-dots: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
}
.bf-hero, body.bf-dark .checkout-section { background: var(--bf-grid); }
.bf-deals, .bf-faq { background: var(--bf-dots); background-size: 22px 22px; }

/* the error modal (common.css) stays a white card with a dark heading */
body.bf-dark .em-card h2 { color: var(--dark); }

/* ── Navigation on the dark hero ──
   Only the bar itself is drawn light. The dropdowns (Support, language/
   currency, My XS News) and the mobile menu stay as on every other page:
   white panels with dark text. */
body.bf-dark .nav-burger span { background: #fff; }
body.bf-dark .nav-lc-btn { color: #fff; }
body.bf-dark .nav-lc-globe { color: rgba(255,255,255,.55); }
body.bf-dark .nav-lc-lang { color: #fff; }
body.bf-dark .nav-lc-curr { color: rgba(255,255,255,.5); }
body.bf-dark .nav-lc.is-open .nav-lc-globe { color: #fff; }
body.bf-dark .btn-mx { color: #fff; }
@media (hover: hover) {
  body.bf-dark .nav-lc-btn:hover .nav-lc-globe,
  body.bf-dark .nav-lc:hover .nav-lc-globe { color: #fff; }
}
/* The collapsed mobile menu is 1px tall (its border). Invisible on light
   pages, a light line on black — hide it only while the menu is closed. */
@media (max-width: 900px) {
  body.bf-dark:not(.menu-open) .nav-links { border-bottom-width: 0; box-shadow: none; }
}
@media (min-width: 901px) {
  body.bf-dark .nav-links > li > a { color: rgba(255,255,255,.62); }
  body.bf-dark .nav-links > li > a:hover,
  body.bf-dark .nav-links .has-sub:hover > a { color: #fff; }
}

/* ── Hero ── */
.bf-hero { position: relative; padding: 150px 0 84px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.07); }
.bf-hero::before {
  content: ''; position: absolute; top: -320px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(230,57,70,.20) 0%, rgba(230,57,70,.05) 42%, transparent 68%);
}
.bf-hero .container { position: relative; z-index: 2; text-align: center; }
.bf-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--red);
  border: 1px solid rgba(230,57,70,.35); background: rgba(230,57,70,.08);
  padding: 8px 16px; border-radius: 100px; margin-bottom: 26px;
}
.bf-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: bfPulse 2s ease-in-out infinite; }
@keyframes bfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.bf-hero h1 { font-size: clamp(46px, 8.4vw, 104px); font-weight: 800; letter-spacing: -3px; line-height: .96; margin-bottom: 26px; }
/* Underline that draws itself — same effect as the hero on the start page
   (pages/index.css: .hero h1 .accent), here with a fixed stroke height
   because the headline is about twice as large. */
.bf-accent { color: var(--red); position: relative; display: inline-block; }
.bf-accent svg {
  position: absolute; bottom: -10px; left: 0; width: 100%; height: 16px;
  stroke: var(--red); stroke-width: 3; fill: none;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: bfDrawLine 1.5s ease forwards .8s;
}
@keyframes bfDrawLine { to { stroke-dashoffset: 0; } }
.bf-hero-sub { font-size: clamp(16px, 2.1vw, 20px); color: rgba(255,255,255,.6); max-width: 620px; margin: 0 auto; line-height: 1.6; }
.bf-hero-sub strong { color: #fff; font-weight: 600; }

/* ── Hero key facts ── */
.bf-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 46px auto 0; }
.bf-stat { padding: 4px 12px; }
.bf-stat + .bf-stat { border-left: 1px solid rgba(255,255,255,.1); }
.bf-stat-n { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.1; }
.bf-stat-l { font-size: 12.5px; color: rgba(255,255,255,.45); margin-top: 6px; }

/* ── Deals ── */
/* sections are separated by the same hairline as the hero */
.bf-deals { padding: 84px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.bf-sec-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.bf-sec-head h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -1.2px; margin-bottom: 14px; }
.bf-sec-head p { font-size: 16.5px; color: rgba(255,255,255,.55); }
.bf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.bf-deal {
  position: relative; background: #141416; border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px; padding: 34px 30px 30px; cursor: pointer;
  transition: transform .3s, border-color .3s, box-shadow .3s, background .3s;
}
.bf-deal:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); }
/* highlighted card: "Best value" until a deal is chosen, then the chosen one */
.bf-deal.is-best, .bf-deal.is-selected {
  border-color: var(--red); background: #171011;
  box-shadow: 0 0 0 1px var(--red), 0 24px 60px rgba(230,57,70,.18);
}
.bf-grid.has-selection .bf-deal.is-best:not(.is-selected) {
  border-color: rgba(255,255,255,.09); background: #141416; box-shadow: none;
}
.bf-deal-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-family: 'Sora', sans-serif; font-size: 10.5px;
  font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 100px; white-space: nowrap;
}
.bf-deal-name { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.6px; line-height: 1.2; margin-bottom: 8px; }
.bf-deal-tag { font-size: 14px; color: rgba(255,255,255,.5); }
.bf-deal-price { display: flex; align-items: baseline; gap: 4px; margin: 20px 0 24px; }
.bf-deal-price .js-price-currency { font-size: 22px; font-weight: 600; color: #fff; }
.bf-deal-price-val { font-family: 'Sora', sans-serif; font-size: 56px; font-weight: 800; color: #fff; letter-spacing: -2.6px; line-height: 1; }
.bf-deal-price-per { font-size: 15px; color: rgba(255,255,255,.45); margin-left: 3px; }
.bf-deal-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.bf-deal-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.72); line-height: 1.45; }
.bf-deal-features svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; stroke: var(--mint-dark); stroke-width: 2.6; fill: none; }
.bf-deal-features strong { color: #fff; font-weight: 600; }

/* ── Buttons ── */
.bf-btn {
  display: block; width: 100%; text-align: center; padding: 15px 20px; border-radius: 12px;
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all .25s; border: 1.5px solid rgba(255,255,255,.18); color: #fff; background: transparent; cursor: pointer;
}
.bf-btn:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.bf-btn-fill { background: var(--red); border-color: var(--red); }
.bf-btn-fill:hover { background: var(--red-hover); border-color: var(--red-hover); }

/* ── Money-back guarantee ──
   The badge is .money-back-badge from common.css, as on block.html,
   set a size smaller and drawn dark here so it sits under the cards as a note. */
.bf-money-back { margin-top: 34px; }
.bf-money-back .money-back-badge {
  padding: 11px 18px; gap: 9px; border-radius: 10px;
  background: #141416; border-color: rgba(255,255,255,.1);
}
.bf-money-back .money-back-badge span { color: rgba(255,255,255,.85); }
.bf-money-back .money-back-badge svg { width: 18px; height: 18px; }
.bf-money-back .money-back-badge span { font-size: 13px; }

/* ── Checkout ──
   Markup, form and payment logic come unchanged from the live checkout
   (common.css shared checkout styles, checkout.js). On this page the section
   gets the dark grid and the order card is drawn dark like the deal cards;
   every colour common.css sets inside the card has a dark counterpart here. */
body.bf-dark .checkout-section { border-top: none; border-bottom: 1px solid rgba(255,255,255,.07); padding: 84px 0; }
body.bf-dark .co-card {
  background: #141416; border: 1px solid rgba(255,255,255,.09); box-shadow: none;
  color-scheme: dark;   /* native select menus and form controls render dark too */
}
body.bf-dark .co-card .form-label { color: rgba(255,255,255,.5); }
body.bf-dark .co-card .form-input { background-color: #0E0E10; border-color: rgba(255,255,255,.12); color: #fff; }
body.bf-dark .co-card .form-input::placeholder { color: rgba(255,255,255,.35); }
body.bf-dark .co-card .form-input:focus { border-color: var(--mint-dark); }
body.bf-dark .co-card .form-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #0E0E10 inset; -webkit-text-fill-color: #fff; }
body.bf-dark .co-card .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
body.bf-dark .co-card .pay-tab { color: rgba(255,255,255,.45); }
body.bf-dark .co-card .pay-tab.active { color: #fff; border-bottom-color: #fff; }
body.bf-dark .co-card .pay-method { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
body.bf-dark .co-card .pay-method:hover { border-color: rgba(255,255,255,.28); box-shadow: none; }
body.bf-dark .co-card .pay-method.selected { background: rgba(45,159,127,.12); border-color: var(--mint-dark); }
body.bf-dark .co-card .pay-method .pay-name { color: #fff; }
body.bf-dark .co-card .pay-method .pay-radio { border-color: rgba(255,255,255,.25); }
body.bf-dark .co-card .pay-method.selected .pay-radio { border-color: var(--mint-dark); }
body.bf-dark .co-card .pay-icon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); }
body.bf-dark .co-card .order-summary { background: rgba(255,255,255,.04); }
body.bf-dark .co-card .order-line .label { color: rgba(255,255,255,.55); }
body.bf-dark .co-card .order-line .value,
body.bf-dark .co-card .order-line.total { color: #fff; }
body.bf-dark .co-card .order-line.total { border-top-color: rgba(255,255,255,.1); }
body.bf-dark .co-card .pay-note,
body.bf-dark .co-card .text-muted { color: rgba(255,255,255,.45); }
body.bf-dark .co-card .co-terms { color: rgba(255,255,255,.55); }
body.bf-dark .co-card .btn-checkout.is-disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.35); box-shadow: none; }
body.bf-dark .co-card .checkout-secure { color: rgba(255,255,255,.45); }

/* ── FAQ ── */
.bf-faq { padding: 84px 0 100px; }
.bf-faq-wrap { max-width: 760px; margin: 0 auto; }
.bf-faq-item { border-bottom: 1px solid rgba(255,255,255,.08); }
.bf-faq-q {
  width: 100%; background: none; border: none; text-align: left; cursor: pointer;
  padding: 22px 36px 22px 0; font-family: 'Sora', sans-serif; font-size: 16.5px; font-weight: 600;
  color: #fff; position: relative;
}
.bf-faq-q::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,.4); border-bottom: 2px solid rgba(255,255,255,.4);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.bf-faq-item.is-open .bf-faq-q::after { transform: translateY(-20%) rotate(-135deg); }
.bf-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s;
  font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7;
}
.bf-faq-item.is-open .bf-faq-a { max-height: 320px; padding-bottom: 22px; }

/* ── Footer: black like the page instead of the usual dark grey ── */
body.bf-dark .fv2 { background: #0A0A0B; }

/* ── Sticky bar ── */
.bf-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(18,18,20,.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(110%); transition: transform .35s ease;
}
.bf-sticky.is-visible { transform: translateY(0); }
.bf-sticky-in { max-width: 1180px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bf-sticky-txt { font-size: 14.5px; color: rgba(255,255,255,.75); }
.bf-sticky-txt strong { color: #fff; font-weight: 600; }
.bf-sticky .bf-btn { width: auto; padding: 11px 26px; font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .bf-grid { grid-template-columns: 1fr; max-width: 470px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .bf-hero { padding: 120px 0 64px; }
  .bf-deals { padding: 64px 0; }
  body.bf-dark .checkout-section { padding: 64px 0; }
  .bf-faq { padding: 64px 0 80px; }
  .bf-eyebrow { font-size: 10px; letter-spacing: 1.5px; padding: 7px 14px; }
  .bf-accent svg { bottom: -7px; height: 11px; }
  .bf-stats { grid-template-columns: repeat(2, 1fr); row-gap: 26px; margin-top: 38px; }
  .bf-stat:nth-child(3) { border-left: none; }
  .bf-stat-n { font-size: 24px; }
  .bf-sticky-in { padding: 11px 16px; gap: 12px; }
  .bf-sticky-txt { font-size: 13px; }
  .bf-sticky .bf-btn { padding: 11px 18px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-eyebrow-dot { animation: none; }
  .bf-accent svg { animation: none; stroke-dashoffset: 0; }
  .bf-deal, .bf-sticky, .bf-faq-a { transition: none; }
}