/* ============================================================
   /affiliates/ scoped styles (self-serve affiliate program page, September 2026)

   Loads AFTER assets/css/homepage.css (the enqueue declares the dependency)
   under the .lp-page-v2 scope, with the page's own .aff-page marker. Every
   shared bk-* component (hero, sections, titlebox, buttons, price card, FAQ,
   support banner, disclosures and their mobile adaptations) comes from the
   homepage bundle; this file carries only what the affiliate page adds.

   Fonts: DM Serif Display (--bk-font-display) for headlines and the big
   figures; Inter (--bk-font-body) for everything else. Breakout Blue is the
   only decorative accent. Green appears once, as the Trustpilot mark.

   Everything is .lp-page-v2-prefixed: the page-level ".lp-page-v2 img" reset
   outranks bare single-class selectors (0,1,1 vs 0,1,0). No em dashes, en
   dashes, or middle dots anywhere in this file.
   ============================================================ */

/* ---- 0. Page rhythm ---- */
.lp-page-v2.aff-page .bk-section { position: relative; }
.lp-page-v2.aff-page .bk-titlebox .bk-lede { max-width: 58ch; }
.lp-page-v2.aff-page .bk-section--dark h3 { color: #fff; }

/* ---- 1. Hero: copy left, code card tile right; copy-only variant centres everything ---- */
.lp-page-v2 .aff-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-bottom: 72px;
}
.lp-page-v2.aff-page--hero-none .aff-hero__grid { grid-template-columns: 1fr; text-align: center; }
.lp-page-v2 .aff-hero__copy { min-width: 0; }
.lp-page-v2 .aff-hero__copy .bk-hero__title { margin: 0 0 20px; max-width: none; font-size: clamp(40px, 4.8vw, 64px); }
.lp-page-v2.aff-page--hero-none .aff-hero__copy .bk-hero__title { margin: 0 auto 20px; max-width: 22ch; }
.lp-page-v2 .aff-hero__copy .bk-hero__sub { margin: 0 0 32px; max-width: 54ch; }
.lp-page-v2.aff-page--hero-none .aff-hero__copy .bk-hero__sub { margin: 0 auto 32px; }
.lp-page-v2 .aff-hero__cta { justify-content: flex-start; }
.lp-page-v2.aff-page--hero-none .aff-hero__cta { justify-content: center; }
.lp-page-v2 .aff-hero__cta .bk-btn--ghost-dark { border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(6, 26, 49, 0.22); }
.lp-page-v2 .aff-hero__cta .bk-btn--ghost-dark:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); color: #fff; }

.lp-page-v2 .aff-hero__visual { display: flex; justify-content: flex-end; min-width: 0; }
.lp-page-v2 .aff-hero__tile {
  position: relative; isolation: isolate;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  border-radius: var(--bk-radius-card-lg);
  overflow: hidden;
  background: #061A31;
  /* Device-class shadow on the window itself; the media inside inherits the radius and carries none (corner ghost rule). */
  box-shadow: 0 32px 70px rgba(6, 26, 49, 0.30);
}
.lp-page-v2 .aff-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lp-page-v2 .aff-hero__edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* ---- 2. Proof bar: four stats under the hero, straight top edge (homepage proof row grammar) ---- */
.lp-page-v2 .aff-proof {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 16, 32, 0.35);
}
.lp-page-v2 .aff-proof__in {
  max-width: var(--bk-in-wide); margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; align-items: start;
}
.lp-page-v2 .aff-proof__item { display: block; min-width: 0; text-align: center; color: inherit; text-decoration: none; }
.lp-page-v2 .aff-proof__item + .aff-proof__item { border-left: 1px solid rgba(255, 255, 255, 0.10); }
.lp-page-v2 a.aff-proof__item:hover { text-decoration: none; }
.lp-page-v2 .aff-proof__num {
  font-family: var(--bk-font-display);
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  margin-bottom: 8px; color: #fff;
  display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.lp-page-v2 .aff-proof__num > span:first-child {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-page-v2 .aff-proof__stars { font-size: 16px; position: relative; top: -3px; }
.lp-page-v2 .aff-proof__lbl {
  font: 600 12px/1.4 var(--bk-font-body);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-cyan-body);
}
.lp-page-v2 .aff-proof__brand {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  color: #fff; letter-spacing: 0; text-transform: none; font-weight: 700; font-size: 12.5px;
}
.lp-page-v2 .aff-proof__brand svg { color: var(--bk-tp-green); }
.lp-page-v2 a.aff-proof__item:hover .aff-proof__brand { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 3. How it works: four numbered steps on one rail ---- */
.lp-page-v2 .aff-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  --cell: calc((100% - 3 * 20px) / 4);
}
.lp-page-v2 .aff-steps::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--cell) / 2); right: calc(var(--cell) / 2); top: 22px; height: 1px;
  background: linear-gradient(90deg, rgba(0, 141, 243, 0.10), var(--bk-blue) 25%, var(--bk-blue) 75%, rgba(0, 141, 243, 0.10));
}
.lp-page-v2 .aff-step { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.lp-page-v2 .aff-step__num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--bk-blue);
  color: var(--bk-text-heading);
  font-family: var(--bk-font-display); font-size: 19px; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px #F7F9FC;
}
.lp-page-v2 .aff-step__card {
  margin-top: 18px; width: 100%; flex: 1;
  background: #fff; border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  padding: 28px 26px 30px;
  box-shadow: var(--bk-shadow-micro);
  text-align: left;
}
.lp-page-v2 .aff-step__t { font-family: var(--bk-font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--bk-text-heading); margin: 0 0 10px; }
.lp-page-v2 .aff-step__d { font: 400 15.5px/1.6 var(--bk-font-body); color: var(--bk-text-cool); margin: 0; text-wrap: pretty; }

/* ---- 4. Commission: the ladder rail above three price-card tiers ---- */
.lp-page-v2 .aff-rail {
  position: relative;
  margin: 0 0 32px;
  --cell: calc((100% - (var(--n, 3) - 1) * 20px) / var(--n, 3));
}
.lp-page-v2 .aff-rail__track {
  position: absolute; z-index: 0;
  left: calc(var(--cell) / 2); right: calc(var(--cell) / 2); top: 7px; height: 2px;
  background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden;
}
.lp-page-v2 .aff-rail__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bk-blue-deep), var(--bk-blue) 50%, var(--bk-cyan));
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.lp-page-v2 .aff-rail.is-in .aff-rail__fill, .lp-page-v2.aff-page:not(.aff-js) .aff-rail__fill { transform: none; }
.lp-page-v2 .aff-rail__marks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.lp-page-v2 .aff-rail__mark { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lp-page-v2 .aff-rail__dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bk-darkblue); border: 2px solid var(--bk-blue);
  box-shadow: 0 0 0 4px rgba(0, 141, 243, 0.18);
  margin-bottom: 14px;
}
.lp-page-v2 .aff-rail__mark--top .aff-rail__dot {
  background: var(--bk-cyan); border-color: var(--bk-cyan);
  box-shadow: 0 0 0 4px rgba(126, 207, 253, 0.22), 0 0 18px rgba(126, 207, 253, 0.7);
}
.lp-page-v2 .aff-rail__mark b { font-family: var(--bk-font-display); font-weight: 400; font-size: 26px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lp-page-v2 .aff-rail__mark small { font: 600 11px/1.3 var(--bk-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--bk-cyan-body); margin-top: 6px; }
.lp-page-v2 .aff-rail__label { text-align: center; font: 500 13px/1.4 var(--bk-font-body); color: var(--bk-text-meta); margin: 22px 0 0; }

.lp-page-v2 .aff-tiers { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.lp-page-v2 .aff-tier { min-width: 0; }
.lp-page-v2 .aff-tier .bk-price__amount { margin-top: 4px; }
.lp-page-v2 .aff-tier__rate small { font-size: 0.5em; margin-left: 2px; }
.lp-page-v2 .aff-tier .bk-price__specs { margin-bottom: 0; }
.lp-page-v2 .aff-tier__specs li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }
.lp-page-v2 .aff-tier__specs .lbl { font: 600 11px/1.3 var(--bk-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--bk-cyan-body); }
.lp-page-v2 .aff-tier__specs .val { color: #fff; font-weight: 500; font-size: 14.5px; line-height: 1.4; }

.lp-page-v2 .aff-comm__cta { text-align: center; margin-top: 36px; }

/* ---- 5. Why Breakout: proof bento (one Midnight plate tile, one stat, three copy tiles, the fact ledger, the verify card) ---- */
.lp-page-v2 .aff-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-auto-flow: dense; }
.lp-page-v2 .aff-tile {
  min-width: 0;
  background: #fff; border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  padding: 32px 28px;
  box-shadow: var(--bk-shadow-micro);
  display: flex; flex-direction: column;
  color: var(--bk-text-cool); text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-page-v2 a.aff-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--bk-shadow-testimonial-hover); }
.lp-page-v2 .aff-tile__t { font-family: var(--bk-font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--bk-text-heading); margin: 0 0 10px; }
.lp-page-v2 .aff-tile__d { font: 400 15.5px/1.6 var(--bk-font-body); color: var(--bk-text-cool); margin: 0; text-wrap: pretty; }
.lp-page-v2 .aff-tile__lbl { font: 600 12px/1.3 var(--bk-font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--bk-text-meta-dark); margin: 0 0 14px; }

/* The Kraken tile sits on the Spark launch beam plate (the same gradient plate family as /products/spark/). */
.lp-page-v2 .aff-tile--kraken {
  grid-column: span 2;
  position: relative; isolation: isolate; overflow: hidden;
  background: #061A31 url("../img/product-page-spark/plates/plate-08.webp") center / cover no-repeat;
  border-color: rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
  min-height: 340px;
}
.lp-page-v2 .aff-tile--kraken .aff-tile__t { color: #fff; }
.lp-page-v2 .aff-tile--kraken .aff-tile__d { color: var(--bk-cyan-body); max-width: 58ch; }
.lp-page-v2 .aff-tile__lockup { display: block; width: min(100%, 300px); height: auto; margin: 0 0 auto; padding-bottom: 36px; }

.lp-page-v2 .aff-tile--stat .aff-tile__num { font-family: var(--bk-font-display); font-size: clamp(48px, 4.4vw, 60px); line-height: 1; color: var(--bk-blue); margin: 0 0 12px; font-variant-numeric: tabular-nums; }

.lp-page-v2 .aff-tile--tp .aff-tile__stars { display: inline-block; font-size: 22px; margin-bottom: 14px; align-self: flex-start; }
.lp-page-v2 .aff-tile__num--tp {
  font-family: var(--bk-font-display); font-size: 48px; line-height: 1; color: var(--bk-text-heading);
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.lp-page-v2 .aff-tile__num--tp em { font-style: normal; font-size: 24px; color: var(--bk-text-heading); }
.lp-page-v2 .aff-tile__brand { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 700 14px/1 var(--bk-font-body); color: var(--bk-text-heading); }
.lp-page-v2 .aff-tile__brand svg { color: var(--bk-tp-green); }

.lp-page-v2 .aff-tile--facts { grid-column: span 2; padding: 12px 28px; justify-content: center; }
.lp-page-v2 .aff-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-page-v2 .aff-facts__row { padding: 20px 24px 20px 0; min-width: 0; }
.lp-page-v2 .aff-facts__row + .aff-facts__row { border-left: 1px solid var(--bk-border); padding-left: 24px; }
.lp-page-v2 .aff-facts__num { font-family: var(--bk-font-display); font-size: 34px; line-height: 1; color: var(--bk-text-heading); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.lp-page-v2 .aff-facts__lbl { font: 400 14.5px/1.5 var(--bk-font-body); color: var(--bk-text-muted); margin: 0; }

.lp-page-v2 .aff-tile--verify { background: var(--bk-darkblue); border-color: rgba(255, 255, 255, 0.08); }
.lp-page-v2 .aff-tile--verify .aff-tile__t { color: #fff; }
.lp-page-v2 .aff-tile--verify .aff-tile__d { color: var(--bk-cyan-body); margin-bottom: 20px; }
.lp-page-v2 .aff-tile__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.lp-page-v2 .aff-tile__links .bk-btn { font-size: 13.5px; padding: 11px 16px; }

/* ---- 6. Earnings calculator: controls left, the result panel right, the footnote across ---- */
.lp-page-v2 .aff-calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  background: #0F2544; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--bk-radius-card-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.lp-page-v2 .aff-calc__controls { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.lp-page-v2 .aff-calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.lp-page-v2 .aff-calc__label { font: 500 15px/1.4 var(--bk-font-body); color: var(--bk-cyan-body); }
.lp-page-v2 .aff-calc__val { font-family: var(--bk-font-display); font-size: 30px; line-height: 1; color: var(--bk-cyan); font-variant-numeric: tabular-nums; white-space: nowrap; }

.lp-page-v2 .aff-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 6px; margin: 10px 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bk-blue-light), var(--bk-cyan)) 0 0 / var(--p, 50%) 100% no-repeat, rgba(255, 255, 255, 0.14);
  outline: none; cursor: pointer;
}
.lp-page-v2 .aff-range::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 3px; }
.lp-page-v2 .aff-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bk-blue);
  box-shadow: 0 2px 12px rgba(0, 141, 243, 0.5);
  cursor: grab;
}
.lp-page-v2 .aff-range::-moz-range-track { height: 6px; background: transparent; border-radius: 3px; }
.lp-page-v2 .aff-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bk-blue);
  box-shadow: 0 2px 12px rgba(0, 141, 243, 0.5);
  cursor: grab;
}
.lp-page-v2 .aff-range:focus-visible { outline: 2px solid var(--bk-cyan); outline-offset: 8px; }
.lp-page-v2 .aff-calc__scale { display: flex; justify-content: space-between; font: 600 11px/1.3 var(--bk-font-body); letter-spacing: 1px; color: var(--bk-text-meta); margin-top: 10px; }

.lp-page-v2 .aff-unlocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-page-v2 .aff-unlock {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--bk-radius-comfort);
  background: rgba(6, 26, 49, 0.55); border: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 14px/1.4 var(--bk-font-body); color: var(--bk-text-meta);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.lp-page-v2 .aff-unlock.is-hit { border-color: rgba(0, 141, 243, 0.45); background: rgba(0, 141, 243, 0.10); color: var(--bk-text-ice); }
.lp-page-v2 .aff-unlock b { font-weight: 600; color: #fff; white-space: nowrap; }
.lp-page-v2 .aff-unlock__when { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
.lp-page-v2 .aff-unlock__swatch { display: block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lp-page-v2 .aff-unlock--t0 .aff-unlock__swatch { background: rgba(0, 141, 243, 0.45); }
.lp-page-v2 .aff-unlock--t1 .aff-unlock__swatch { background: var(--bk-blue); }
.lp-page-v2 .aff-unlock--t2 .aff-unlock__swatch,
.lp-page-v2 .aff-unlock--t3 .aff-unlock__swatch { background: var(--bk-cyan); }

.lp-page-v2 .aff-calc__result {
  background: linear-gradient(180deg, #14355E 0%, #0F2544 100%);
  border: 1px solid var(--bk-blue);
  box-shadow: 0 0 0 1px var(--bk-blue), 0 24px 64px rgba(0, 141, 243, 0.18);
  border-radius: var(--bk-radius-card-lg);
  padding: clamp(24px, 2.6vw, 34px);
  text-align: center;
  display: flex; flex-direction: column; min-width: 0;
}
.lp-page-v2 .aff-calc__cap { font: 600 12px/1.3 var(--bk-font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--bk-cyan-body); margin-bottom: 10px; }
.lp-page-v2 .aff-calc__big { font-family: var(--bk-font-display); font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -1.4px; color: var(--bk-cyan); font-variant-numeric: tabular-nums; }
.lp-page-v2 .aff-calc__line { font: 400 14px/1.5 var(--bk-font-body); color: var(--bk-cyan-body); margin-top: 8px; }
.lp-page-v2 .aff-calc__divider { height: 1px; background: rgba(165, 222, 253, 0.22); margin: 22px 0; }
.lp-page-v2 .aff-calc__year { font-family: var(--bk-font-display); font-size: clamp(34px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.8px; color: #fff; font-variant-numeric: tabular-nums; }
.lp-page-v2 .aff-calc__cta { margin-top: 26px; align-self: center; }
.lp-page-v2 .aff-calc__note { grid-column: 1 / -1; margin: 0; font: 400 13px/1.65 var(--bk-font-body); color: var(--bk-text-meta); text-wrap: pretty; }

/* ---- 7. Apply: what happens next beside the application form ---- */
.lp-page-v2 .aff-apply__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.lp-page-v2 .aff-h2--left { text-align: left; }
.lp-page-v2 .aff-lede--left { text-align: left; margin-left: 0; max-width: 52ch; }
.lp-page-v2 .aff-apply__copy { position: sticky; top: 110px; min-width: 0; }
.lp-page-v2 .aff-next { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-page-v2 .aff-next__item { display: flex; gap: 14px; align-items: flex-start; }
.lp-page-v2 .aff-next__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bk-bg-info-light); color: var(--bk-text-heading);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--bk-font-body); margin-top: 1px;
}
.lp-page-v2 .aff-next__p { font: 400 15.5px/1.6 var(--bk-font-body); color: var(--bk-text-cool); margin: 0; }
.lp-page-v2 .aff-next__p b { color: var(--bk-text-heading); font-weight: 600; }
.lp-page-v2 .aff-apply__note {
  margin: 24px 0 0; padding: 14px 16px;
  border-radius: var(--bk-radius-comfort);
  background: var(--bk-bg-info-light); border: 1px solid #D2E9FA;
  font: 400 14px/1.55 var(--bk-font-body); color: var(--bk-text-cool);
}

/* The form card. Forminator renders with its "None" design (forced in page-affiliates.php), so these rules own the look.
   Markup contract: .forminator-row > .forminator-col(-6|-12) > .forminator-field > .forminator-label + control + .forminator-description,
   .forminator-error-message injected on failure, .forminator-response-message above the fields, .forminator-button-submit last. */
.lp-page-v2 .aff-form {
  background: #fff; border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  box-shadow: var(--bk-shadow-signature);
  padding: clamp(24px, 3vw, 40px);
  min-width: 0;
}
.lp-page-v2 .aff-form__missing { margin: 0; font: 400 14.5px/1.55 var(--bk-font-body); color: var(--bk-text-muted); }
.lp-page-v2 .aff-form__head { margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--bk-border); }
.lp-page-v2 .aff-form__t { font-family: var(--bk-font-display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--bk-text-heading); margin: 0 0 6px; }
.lp-page-v2 .aff-form__d { font: 400 14.5px/1.5 var(--bk-font-body); color: var(--bk-text-muted); margin: 0; }
.lp-page-v2 .aff-form form { margin: 0; }
/* Forminator's open grid (forminator-grid.open.min.css loads even under the "None" design) gives rows display:flex with
   -15px side margins and 30px bottom margins, and pads each column 15px from 783px up, which fights the card padding.
   These selectors carry the same hooks it uses, so they win on specificity without !important. */
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row,
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-row { display: flex; flex-wrap: wrap; gap: 20px 18px; margin: 0 0 20px; }
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row:last-child,
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row.forminator-row-last { margin-bottom: 0; }
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-col,
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-col { flex: 1 1 100%; width: auto; max-width: none; min-width: 0; padding: 0; margin: 0; }
.lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-col-12 { flex-basis: 100%; }
@media (min-width: 641px) {
  /* Same specificity as the column rule above and later in the sheet, so the half-width basis wins over its 100%. */
  .lp-page-v2 .aff-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-col-6,
  .lp-page-v2 .aff-form .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-col-6 { flex: 1 1 calc(50% - 9px); }
}
.lp-page-v2 .aff-form .forminator-field { position: relative; }
.lp-page-v2 .aff-form .forminator-label { display: block; font: 600 14px/1.35 var(--bk-font-body); color: var(--bk-text-heading); margin: 0 0 8px; }
.lp-page-v2 .aff-form .forminator-required { color: #0A66C2; margin-left: 2px; }
.lp-page-v2 .aff-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.lp-page-v2 .aff-form select,
.lp-page-v2 .aff-form textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 16px/1.4 var(--bk-font-body); color: var(--bk-text-default);
  background: #fff; border: 1px solid var(--bk-border-input);
  border-radius: var(--bk-radius-comfort);
  box-shadow: var(--bk-shadow-micro);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.lp-page-v2 .aff-form input::placeholder, .lp-page-v2 .aff-form textarea::placeholder { color: var(--bk-text-meta-dark); }
.lp-page-v2 .aff-form input:focus, .lp-page-v2 .aff-form select:focus, .lp-page-v2 .aff-form textarea:focus { outline: none; border-color: var(--bk-blue); box-shadow: 0 0 0 3px rgba(0, 141, 243, 0.18); }
.lp-page-v2 .aff-form select {
  cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7695' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.lp-page-v2 .aff-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.lp-page-v2 .aff-form .forminator-description { display: block; font: 400 13px/1.5 var(--bk-font-body); color: var(--bk-text-meta-dark); margin-top: 7px; }
.lp-page-v2 .aff-form .forminator-description [data-limit] { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.lp-page-v2 .aff-form .forminator-error-message { display: block; font: 500 13px/1.45 var(--bk-font-body); color: #B42318; margin-top: 7px; }
.lp-page-v2 .aff-form .forminator-has_error input, .lp-page-v2 .aff-form .forminator-has_error select, .lp-page-v2 .aff-form .forminator-has_error textarea { border-color: #F04438; }
.lp-page-v2 .aff-form .forminator-has_error input:focus, .lp-page-v2 .aff-form .forminator-has_error select:focus, .lp-page-v2 .aff-form .forminator-has_error textarea:focus { box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.18); }

/* Consent: Forminator renders the box inside a label and the sentence in a sibling div, so the wrapper carries the row. */
.lp-page-v2 .aff-form .forminator-field-consent { padding-top: 22px; border-top: 1px solid var(--bk-border); }
.lp-page-v2 .aff-form .forminator-checkbox__wrapper { display: flex; align-items: flex-start; gap: 12px; }
.lp-page-v2 .aff-form .forminator-checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 400 14.5px/1.5 var(--bk-font-body); color: var(--bk-text-cool); margin: 0; }
.lp-page-v2 .aff-form .forminator-checkbox.forminator-consent { flex: none; display: inline-flex; }
.lp-page-v2 .aff-form .forminator-consent__label { flex: 1; font: 400 14.5px/1.5 var(--bk-font-body); color: var(--bk-text-cool); }
.lp-page-v2 .aff-form .forminator-checkbox + .forminator-checkbox { margin-top: 10px; }
/* The consent and opt-in rows carry their own sentence; their Forminator field labels stay for screen readers only. */
.lp-page-v2 .aff-form .forminator-field-consent .forminator-field > .forminator-label,
.lp-page-v2 .aff-form .forminator-field-checkbox .forminator-field > .forminator-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.lp-page-v2 .aff-form .forminator-checkbox input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  border: 1px solid var(--bk-border-input); border-radius: 6px; background: #fff;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lp-page-v2 .aff-form .forminator-checkbox input[type="checkbox"]:checked {
  background: var(--bk-blue) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--bk-blue);
}
.lp-page-v2 .aff-form .forminator-checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 141, 243, 0.22); }
.lp-page-v2 .aff-form .forminator-checkbox-box { display: none; }
.lp-page-v2 .aff-form .forminator-checkbox-label, .lp-page-v2 .aff-form .forminator-consent__label { display: block; }
.lp-page-v2 .aff-form .forminator-checkbox a, .lp-page-v2 .aff-form .forminator-consent__label a { color: #0A66C2; text-decoration: underline; text-underline-offset: 2px; }

.lp-page-v2 .aff-form .forminator-button-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; padding: 16px 30px; margin-top: 10px;
  border: 1px solid var(--bk-blue); border-radius: var(--bk-radius-button);
  background: var(--bk-gradient-cta-desktop); color: #fff;
  font: 600 17px/1.2 var(--bk-font-body); cursor: pointer;
  box-shadow: var(--bk-shadow-micro);
  transition: transform 0.2s, background 0.3s, opacity 0.2s;
}
.lp-page-v2 .aff-form .forminator-button-submit:hover { background: var(--bk-gradient-cta-hover); transform: translateY(-2px); }
.lp-page-v2 .aff-form .forminator-button-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }

.lp-page-v2 .aff-form .forminator-response-message { display: block; padding: 14px 16px; border-radius: var(--bk-radius-comfort); font: 500 14.5px/1.5 var(--bk-font-body); margin: 0 0 18px; }
.lp-page-v2 .aff-form .forminator-response-message:empty,
.lp-page-v2 .aff-form .forminator-response-message[aria-hidden="true"],
.lp-page-v2 .aff-form .forminator-hidden { display: none !important; }
.lp-page-v2 .aff-form .forminator-response-message.forminator-error { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }
.lp-page-v2 .aff-form .forminator-response-message.forminator-success { background: #ECFDF3; color: #067647; border: 1px solid #ABEFC6; font-size: 15.5px; }
.lp-page-v2 .aff-form .forminator-response-message p { margin: 0; color: inherit; font: inherit; }
.lp-page-v2 .aff-form .forminator-g-recaptcha { display: block; }

/* ---- 8. FAQ additions (the homepage FAQ component carries the cards and the accordion) ---- */
.lp-page-v2 .aff-faq .bk-faq { margin-top: 0; }
.lp-page-v2 .aff-faq__tbc { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bk-border); color: var(--bk-text-muted); font-size: 14px; }
.lp-page-v2 .aff-tbc {
  display: inline-block; vertical-align: 1px; margin-right: 6px;
  font: 700 10.5px/1 var(--bk-font-body); letter-spacing: 1.2px; text-transform: uppercase;
  color: #0A66C2; background: var(--bk-bg-info-light); border: 1px solid #D2E9FA;
  border-radius: var(--bk-radius-pill); padding: 5px 9px;
}
.lp-page-v2 .aff-close .bk-support__d { max-width: 56ch; }

/* ---- 9. Reveal on scroll (the JS adds .aff-js to the wrapper; without it everything is simply visible) ---- */
.lp-page-v2.aff-js [data-aff-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.lp-page-v2.aff-js [data-aff-reveal].is-in { opacity: 1; transform: none; }

/* ---- 10. Responsive ---- */
@media (max-width: 1080px) {
  .lp-page-v2 .aff-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-page-v2 .aff-steps::before { display: none; }
  .lp-page-v2 .aff-step__num { box-shadow: none; }
  .lp-page-v2 .aff-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-page-v2 .aff-tile--facts { grid-column: span 2; }
  .lp-page-v2 .aff-tile--verify { grid-column: span 2; }
  .lp-page-v2 .aff-calc { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lp-page-v2 .aff-hero__grid { grid-template-columns: 1fr; text-align: center; padding-bottom: 56px; }
  .lp-page-v2 .aff-hero__copy .bk-hero__title { margin: 0 auto 20px; max-width: 22ch; }
  .lp-page-v2 .aff-hero__copy .bk-hero__sub { margin: 0 auto 32px; }
  .lp-page-v2 .aff-hero__cta { justify-content: center; }
  .lp-page-v2 .aff-hero__visual { justify-content: center; }
  .lp-page-v2 .aff-hero__tile { width: min(100%, 420px); }
  .lp-page-v2 .aff-rail { display: none; }
  .lp-page-v2 .aff-tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .lp-page-v2 .aff-apply__grid { grid-template-columns: 1fr; }
  .lp-page-v2 .aff-apply__copy { position: static; }
}
@media (max-width: 640px) {
  /* Phones: copy-only hero (the code card stays for tablets and up), tighter bottom. */
  .lp-page-v2 .aff-hero__grid { padding-bottom: 48px; gap: 0; }
  .lp-page-v2 .aff-hero__copy .bk-hero__title { font-size: 34px; letter-spacing: -0.8px; max-width: 100%; }
  .lp-page-v2 .aff-hero__copy .bk-hero__sub { margin-bottom: 26px; }
  .lp-page-v2 .aff-hero__visual { display: none; }
  .lp-page-v2 .aff-proof__in { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 20px 24px; }
  .lp-page-v2 .aff-proof__item + .aff-proof__item { border-left: 0; }
  .lp-page-v2 .aff-proof__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.10); }
  .lp-page-v2 .aff-proof__item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: 18px; }
  .lp-page-v2 .aff-proof__num { font-size: 26px; }
  .lp-page-v2 .aff-proof__stars { font-size: 13px; top: -2px; }
  .lp-page-v2 .aff-proof__lbl { font-size: 10.5px; letter-spacing: 1.5px; }
  .lp-page-v2 .aff-proof__brand { display: flex; justify-content: center; margin: 6px 0 0; }

  .lp-page-v2 .aff-steps { grid-template-columns: 1fr; gap: 14px; }
  .lp-page-v2 .aff-step { flex-direction: row; align-items: flex-start; gap: 14px; }
  .lp-page-v2 .aff-step__num { width: 38px; height: 38px; font-size: 16px; margin-top: 18px; }
  .lp-page-v2 .aff-step__card { margin-top: 0; padding: 22px 20px 24px; }
  .lp-page-v2 .aff-step__t { font-size: 22px; }
  .lp-page-v2 .aff-step__d { font-size: 14.5px; }

  /* Tiers: swipe carousel with next-card peek, the pricing matrix grammar (homepage.css .bk-price-grid on phones). */
  .lp-page-v2 .aff-tiers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 4px 24px 8px;
    scroll-padding-left: 24px;
  }
  .lp-page-v2 .aff-tiers::-webkit-scrollbar { display: none; }
  .lp-page-v2 .aff-tier { scroll-snap-align: start; padding: 26px 22px; }
  .lp-page-v2 .aff-tier:hover { transform: none; }
  .lp-page-v2 .aff-tier .bk-price__amount { font-size: 46px; }

  .lp-page-v2 .aff-comm__cta { margin-top: 28px; }
  .lp-page-v2 .aff-comm__cta .bk-btn { width: 100%; max-width: 420px; }

  .lp-page-v2 .aff-bento { grid-template-columns: 1fr; gap: 14px; }
  .lp-page-v2 .aff-tile, .lp-page-v2 .aff-tile--kraken, .lp-page-v2 .aff-tile--facts, .lp-page-v2 .aff-tile--verify { grid-column: span 1; }
  .lp-page-v2 .aff-tile { padding: 24px 20px; }
  .lp-page-v2 .aff-tile__t { font-size: 22px; }
  .lp-page-v2 .aff-tile--kraken { min-height: 0; }
  .lp-page-v2 .aff-tile__lockup { width: min(100%, 240px); padding-bottom: 28px; }
  .lp-page-v2 .aff-tile--facts { padding: 6px 20px; }
  .lp-page-v2 .aff-facts { grid-template-columns: 1fr; }
  .lp-page-v2 .aff-facts__row, .lp-page-v2 .aff-facts__row + .aff-facts__row { padding: 16px 0; border-left: 0; }
  .lp-page-v2 .aff-facts__row + .aff-facts__row { border-top: 1px solid var(--bk-border); }
  .lp-page-v2 .aff-facts__num { font-size: 28px; }
  .lp-page-v2 .aff-tile__links .bk-btn { width: 100%; }

  .lp-page-v2 .aff-calc { padding: 20px; gap: 24px; }
  .lp-page-v2 .aff-calc__val { font-size: 26px; }
  .lp-page-v2 .aff-calc__result { padding: 22px 18px; }
  .lp-page-v2 .aff-calc__big { font-size: 44px; }
  .lp-page-v2 .aff-calc__year { font-size: 32px; }
  .lp-page-v2 .aff-calc__cta { width: 100%; }
  .lp-page-v2 .aff-unlock { font-size: 13px; padding: 10px 12px; }

  .lp-page-v2 .aff-form { padding: 22px 18px; }
  .lp-page-v2 .aff-form__head { margin-bottom: 20px; padding-bottom: 16px; }
  .lp-page-v2 .aff-form__t { font-size: 24px; }
  .lp-page-v2 .aff-next { margin-top: 24px; }
}

/* ---- 11. Reduced motion: everything lands in its final state ---- */
@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .aff-rail__fill { transition: none; transform: none; }
  .lp-page-v2.aff-js [data-aff-reveal] { opacity: 1; transform: none; transition: none; }
  .lp-page-v2 a.aff-tile:hover, .lp-page-v2 .aff-form .forminator-button-submit:hover, .lp-page-v2 .aff-hero__cta .bk-btn:hover { transform: none; }
  .lp-page-v2 .aff-unlock { transition: none; }
}
