/* ============================================================
   LANDING PAGE V2 — A1 Trust design refresh
   Source: handoff bundle from Claude Design (claude.ai/design),
   merged from colors_and_type.css + styles.css.

   Scoped via single-landing_page-v2.php — this file is only
   enqueued when ACF design_version === 'v2' on a landing_page.
   The font @font-face URLs are theme-relative (assets/fonts/
   landing-page-v2/) so they resolve correctly through WP.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/landing-page-v2/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/landing-page-v2/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/landing-page-v2/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/landing-page-v2/Inter-Variable-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* ---------- Tokens (scoped to the v2 LP body class) ---------- */
.lp-page-v2 {
  /* Brand primaries */
  --bk-blue: #008DF3;
  --bk-blue-light: #30B2FB;
  --bk-blue-deep: #1077D7;
  --bk-blue-hover: #229EE4;
  --bk-cyan: #7ECFFD;
  --bk-cyan-body: #A5DEFD;
  --bk-darkblue: #061A31;
  --bk-white: #ffffff;
  --bk-green: #31E48B;

  /* Gradients */
  --bk-gradient-hero: linear-gradient(65deg, #061A31 0%, #004B87 66%, #008DF3 100%);
  --bk-gradient-cta-desktop: linear-gradient(152deg, #30B2FB 17.53%, #1077D7 86.53%);
  --bk-gradient-cta-hover: linear-gradient(100deg, #008DF3 17.53%, #229EE4 86.53%);
  --bk-gradient-title-vert: linear-gradient(180deg, #008DF3 5.71%, #7ECFFD 100%);
  --bk-gradient-title-horiz: linear-gradient(91deg, #061A31 0.07%, #008DF3 100.07%);

  /* Surfaces */
  --bk-bg-body: #ffffff;
  --bk-bg-dark: #061A31;
  --bk-bg-info-light: #EBF8FF;
  --bk-bg-zebra: #F8F9FC;

  /* Text */
  --bk-text-default: #101828;
  --bk-text-heading: #061A31;
  --bk-text-cool: #304069;
  --bk-text-muted: #475467;
  --bk-text-meta: #ABB8D8;
  --bk-text-meta-dark: #6A7695;
  --bk-text-cyan: #A5DEFD;
  --bk-text-ice: #EAECF0;

  /* Borders */
  --bk-border: #ECF0F8;
  --bk-border-input: #DDE3F3;
  --bk-border-white-cta: #D0D5DD;

  /* Thematic */
  --bk-discord-purple: #5865F2;
  --bk-star-gold: #F5B217;

  /* Shadows */
  --bk-shadow-micro: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --bk-shadow-testimonial: 0 4px 12px rgba(0, 0, 0, 0.06);
  --bk-shadow-testimonial-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --bk-shadow-signature: 0px 24px 64px 0px rgba(0, 0, 0, 0.10);
  --bk-shadow-halo: 0px 0px 8px 8px rgba(0, 0, 0, 0.03);
  --bk-nav-glass: rgba(6, 26, 49, 0.9);

  /* Radii */
  --bk-radius-button: 8px;
  --bk-radius-comfort: 12px;
  --bk-radius-card: 16px;
  --bk-radius-card-lg: 24px;
  --bk-radius-pill: 100px;

  /* Container widths */
  --bk-in-tiny: 840px;
  --bk-in-short: 1096px;
  --bk-in-wide: 1220px;
  --bk-in-feature: 1332px;

  /* Type families */
  --bk-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --bk-font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ============================================================
   Base reset (scoped) + typography
   ============================================================ */

/* Defensive horizontal-overflow guard. v2 LPs render inside base.twig,
   which loads the global theme stylesheet alongside this file. A few
   theme rules use width:100vw / width:calc(100% + 30px) inside specific
   components which, on certain mobile viewports, push the document past
   the visual viewport and produce a white sidebar to the right of the
   hero (the page content visually shifts left).
   `overflow-x: clip` clips any horizontal escapees without establishing
   a new scrollable ancestor, so the sticky nav (.lp-nav) still pins to
   the viewport correctly. Only applies on pages where this stylesheet
   is loaded (i.e. v2 LPs). */
html, body { overflow-x: clip; max-width: 100%; }

.lp-page-v2 { font-family: var(--bk-font-body); font-size: 16px; line-height: 1.5; color: var(--bk-text-default); background: var(--bk-bg-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lp-page-v2 * { box-sizing: border-box; }
.lp-page-v2 img { max-width: 100%; display: block; }
.lp-page-v2 button { font: inherit; cursor: pointer; }

.lp-page-v2 h1, .lp-page-v2 .bk-hero__title {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 88px); line-height: 1.13; letter-spacing: -1.76px;
  color: var(--bk-text-heading); margin: 0 0 24px;
}
.lp-page-v2 h2 {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 64px); line-height: 1.2; letter-spacing: -1.2px;
  color: var(--bk-text-heading); margin: 0 0 20px;
}
.lp-page-v2 h3 {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 56px); line-height: 1.22;
  color: var(--bk-text-heading); margin: 0 0 16px;
}
.lp-page-v2 h4 {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: 24px; line-height: 1.33;
  color: var(--bk-text-heading); margin: 0 0 12px;
}

.lp-page-v2 p {
  font-family: var(--bk-font-body); font-size: 16px; font-weight: 400;
  line-height: 1.5; color: var(--bk-text-cool); margin: 0 0 16px;
}

.lp-page-v2 a { color: var(--bk-blue); text-decoration: none; }
.lp-page-v2 a:hover { text-decoration: underline; }

/* Gradient-clipped headline accents */
.lp-page-v2 h1 span, .lp-page-v2 h1 b, .lp-page-v2 h1 strong,
.lp-page-v2 h2 span, .lp-page-v2 h2 b, .lp-page-v2 h2 strong,
.lp-page-v2 .bk-grad-text {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: inherit;
}

/* On-dark inversion */
.lp-page-v2 .on-dark { color: var(--bk-white); }
.lp-page-v2 .on-dark h1, .lp-page-v2 .on-dark h2,
.lp-page-v2 .on-dark h3, .lp-page-v2 .on-dark h4 { color: var(--bk-white); }
.lp-page-v2 .on-dark p { color: var(--bk-text-cyan); }
.lp-page-v2 .on-dark .bk-eyebrow { color: var(--bk-cyan); }

/* ============================================================
   A1 Trust LP styles (verbatim port from styles.css)
   ============================================================ */

.lp-page-v2 { margin: 0; background: #fff; }
.lp-page-v2 html { scroll-behavior: smooth; } /* harmless when html lacks the body class — left for parity */

.lp-page-v2 .bk-in        { max-width: var(--bk-in-wide); margin: 0 auto; padding: 0 24px; }
.lp-page-v2 .bk-in--narrow{ max-width: var(--bk-in-tiny); margin: 0 auto; padding: 0 24px; }
.lp-page-v2 .bk-in--wide  { max-width: var(--bk-in-feature); margin: 0 auto; padding: 0 24px; }

/* Smooth scroll on the v2 LP html element (set via JS toggle for safety). */
html.lp-html-v2 { scroll-behavior: smooth; }

/* ============ NAV ============
   Verbatim port of v1's .lp-nav so /lp/a1-trust-new/ ships the same
   sticky transparent nav that becomes a navy-glass nav on scroll. The
   `is-scrolled` class is toggled on the .lp-page-v2 wrapper element by
   the v2 JS bundle (base.twig doesn't expose body_class(), so we scope
   the scroll state to the wrapper instead). The CTA inherits .btn-primary.
   ============================================================ */
.lp-page-v2 .lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.lp-page-v2.is-scrolled .lp-nav {
  background: rgba(6, 26, 49, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lp-page-v2 .lp-nav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-page-v2 .lp-nav__logo {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.lp-page-v2 .lp-nav__cta { /* inherits .btn-primary */ }

/* CTA — solid-white treatment (Option A) so the nav button reads clearly
   against the blue hero gradient at the top of the page and against the
   navy-glass nav once scrolled. Navy text keeps WCAG AA contrast on white. */
.lp-page-v2 .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--bk-darkblue);
  font-family: var(--bk-font-body);
  font-size: 17px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(2,17,40,0.30);
  text-decoration: none;
}
.lp-page-v2 .btn-primary:hover { background: var(--bk-bg-info-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(2,17,40,0.34); text-decoration: none; }
.lp-page-v2 .btn-primary:active { transform: translateY(0); }

/* Responsive nav — match v1 breakpoints */
@media (max-width: 900px) {
  .lp-page-v2 .lp-nav__cta { font-size: 13px; padding: 9px 14px; box-shadow: none; }
}
@media (max-width: 600px) {
  .lp-page-v2 .lp-nav__inner { padding: 0 16px; }
}

/* ============ BUTTONS ============ */
.lp-page-v2 .bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--bk-font-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--bk-radius-button);
  padding: 12px 22px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s ease, background .5s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
  cursor: pointer; user-select: none;
}
.lp-page-v2 .bk-btn--gradient {
  background: var(--bk-gradient-cta-desktop);
  color: #fff; box-shadow: var(--bk-shadow-micro);
}
.lp-page-v2 .bk-btn--gradient:hover { background: var(--bk-gradient-cta-hover); transform: translateY(-2px); text-decoration: none; }
.lp-page-v2 .bk-btn--ghost-dark {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.lp-page-v2 .bk-btn--ghost-dark:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.5); text-decoration: none; }
.lp-page-v2 .bk-btn--ghost-light {
  background: transparent; color: var(--bk-text-heading);
  border: 1px solid var(--bk-border-input);
}
.lp-page-v2 .bk-btn--ghost-light:hover { transform: translateY(-2px); border-color: var(--bk-blue); text-decoration: none; }
.lp-page-v2 .bk-btn--large { padding: 16px 28px; font-size: 16px; }
.lp-page-v2 .bk-btn--nav { padding: 9px 18px; font-size: 13px; }
.lp-page-v2 .bk-btn--block { width: 100%; }

/* Hero primary CTA — solid-white treatment (Option A) to match the nav CTA
   and stand off the hero gradient. Scoped to the hero so the gradient CTAs in
   Pricing / Leaderboard / Quiz keep the blue fill. */
.lp-page-v2 .bk-hero__cta .bk-btn--gradient {
  background: #ffffff;
  color: var(--bk-darkblue);
  box-shadow: 0 6px 18px rgba(2,17,40,0.30);
}
.lp-page-v2 .bk-hero__cta .bk-btn--gradient:hover {
  background: var(--bk-bg-info-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(2,17,40,0.34);
}

/* ============ HERO ============ */
.lp-page-v2 .bk-hero {
  position: relative; isolation: isolate;
  background: var(--bk-gradient-hero);
  background-size: 180% 180%;
  animation: bk-grad 9s ease infinite;
  color: #fff;
  /* Pull the hero up behind the transparent nav so the gradient is
     seamless. Same technique v1 .lp-hero uses (margin-top: -78px +
     padding-top compensation). 78px = .lp-nav__inner height. */
  margin-top: -78px;
  padding: calc(128px + 78px) 0 112px;
  overflow: hidden;
}
@keyframes bk-grad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.lp-page-v2 .bk-hero__glow {
  position: absolute; top: -40%; right: -25%;
  width: 1100px; height: 1100px;
  background: radial-gradient(closest-side, rgba(126,207,253,0.18), transparent 70%);
  filter: blur(10px);
  pointer-events: none; z-index: 0;
}
.lp-page-v2 .bk-hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: center;
}

/* DC-03 Discord community post — hero visual for the a1-trust-discord variant.
   Sits in the right hero column in place of the PayoutFlow. The card PNG is
   transparent, so the hero gradient shows through; the drop-shadow lifts it off
   the navy. The .bk-discord-hero__disc qualifier below is rendered by the
   partial (Matt, July 28, 2026: outcomes-vary qualifier ships with every
   payout-displaying hero). */
.lp-page-v2 .bk-discord-hero { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.lp-page-v2 .bk-discord-hero__img { width: 100%; max-width: 540px; height: auto; filter: drop-shadow(0 26px 60px rgba(0,0,0,0.38)); }
.lp-page-v2 .bk-discord-hero__disc {
  margin: 16px auto 0; max-width: 480px;
  font-size: 12px; line-height: 1.45; text-align: center;
  color: rgba(255,255,255,0.66);
}

/* Phone mockup — hero visual for the a1-trust-app variant. Transparent PNG of the
   trading app (confirmed payout) dropped onto the hero gradient; capped narrow so
   the tall portrait device doesn't dominate the column. The .bk-app-hero__disc
   qualifier below is rendered by the partial (Matt, July 28, 2026:
   outcomes-vary qualifier ships with every payout-displaying hero). */
.lp-page-v2 .bk-app-hero { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.lp-page-v2 .bk-app-hero__img { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 30px 64px rgba(0,0,0,0.45)); }
.lp-page-v2 .bk-app-hero__disc {
  margin: 18px auto 0; max-width: 420px;
  font-size: 12px; line-height: 1.45; text-align: center;
  color: rgba(255,255,255,0.66);
}
@media (max-width: 1080px) { .lp-page-v2 .bk-hero__in { grid-template-columns: 1fr; gap: 48px; } }

.lp-page-v2 .bk-hero__title {
  font-family: var(--bk-font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 77px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  margin: 0 0 20px;
  color: #fff;
}
.lp-page-v2 .bk-hero__title span,
.lp-page-v2 .bk-hero__title b,
.lp-page-v2 .bk-hero__title strong {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 400;
}
.lp-page-v2 .bk-hero__sub {
  font-size: 19px; font-weight: 300; line-height: 1.55;
  color: var(--bk-text-ice); max-width: 560px;
  margin: 0 0 32px;
}
.lp-page-v2 .bk-hero__sub b { color: #fff; font-weight: 500; }
.lp-page-v2 .bk-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-page-v2 .bk-hero__trust-row {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 28px;
  font-size: 13px; color: var(--bk-cyan-body); font-weight: 500;
}
.lp-page-v2 .bk-hero__trust-item { display: inline-flex; align-items: center; gap: 8px; }
.lp-page-v2 .bk-hero__trust-stars { color: #00B67A; letter-spacing: 2px; font-size: 18px; }
.lp-page-v2 .bk-hero__trust-sep { opacity: .4; }

/* Aggregate star rating — renders a fractional score (set --bk-stars, out of 5)
   as a partially-filled 5-star row via a clipped gold/green overlay. Used for
   the Trustpilot summary displays; the live score is 4.7, displayed as 4.5
   glyphs per the round-down convention in project-context/proof.md (B3), with
   the exact numeric (4.7) stated in the adjacent label. Individual review cards
   keep their own full-star styling (.bk-quote__stars). */
.lp-page-v2 .bk-stars {
  position: relative; display: inline-block;
  line-height: 1; white-space: nowrap; vertical-align: middle;
}
.lp-page-v2 .bk-stars::before,
.lp-page-v2 .bk-stars::after {
  content: "\2605\2605\2605\2605\2605"; letter-spacing: 2px;
}
.lp-page-v2 .bk-stars::before { color: rgba(0, 182, 122, 0.28); }
.lp-page-v2 .bk-stars::after {
  position: absolute; left: 0; top: 0;
  width: calc(var(--bk-stars, 5) / 5 * 100%);
  overflow: hidden; color: #00B67A;
}

/* ============ SECTION SCAFFOLD ============ */
.lp-page-v2 .bk-section { padding: 120px 0; }
.lp-page-v2 .bk-section--dark { background: var(--bk-darkblue); color: #fff; }
.lp-page-v2 .bk-section--dark-deeper { background: #051426; color: #fff; }
.lp-page-v2 .bk-section--light { background: #fff; }
.lp-page-v2 .bk-section--snow { background: #F7F9FC; }

.lp-page-v2 .bk-titlebox { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.lp-page-v2 .bk-eyebrow {
  display: inline-block;
  font: 700 13px/1 var(--bk-font-body);
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--bk-blue);
  margin-bottom: 16px;
}
.lp-page-v2 .on-dark .bk-eyebrow { color: var(--bk-cyan); }
.lp-page-v2 .bk-h2 {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 16px;
  color: var(--bk-text-heading);
}
.lp-page-v2 .on-dark .bk-h2,
.lp-page-v2 .bk-section--dark .bk-h2,
.lp-page-v2 .bk-section--dark-deeper .bk-h2 { color: #fff; }
.lp-page-v2 .bk-h2 span,
.lp-page-v2 .bk-h2 b,
.lp-page-v2 .bk-h2 strong {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 400;
}
.lp-page-v2 .bk-lede {
  font-size: 19px; font-weight: 300; line-height: 1.55;
  color: var(--bk-text-cool);
  margin: 0;
}
.lp-page-v2 .on-dark .bk-lede,
.lp-page-v2 .bk-section--dark .bk-lede,
.lp-page-v2 .bk-section--dark-deeper .bk-lede { color: var(--bk-cyan-body); }

/* ============ PROOF BAR ============ */
.lp-page-v2 .bk-proofbar {
  background: var(--bk-darkblue);
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-page-v2 .bk-proofbar__in {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; align-items: center;
}
@media (max-width: 640px) { .lp-page-v2 .bk-proofbar__in { grid-template-columns: 1fr; gap: 16px; } }
.lp-page-v2 .bk-proofbar__item { text-align: center; }
.lp-page-v2 .bk-proofbar__num {
  font-family: var(--bk-font-display);
  font-size: clamp(32px, 4vw, 48px); line-height: 1;
  margin-bottom: 6px;
}
.lp-page-v2 .bk-proofbar__num span {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-page-v2 .bk-proofbar__lbl {
  font: 600 12px/1.3 var(--bk-font-body);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-cyan-body);
}

/* ============ CONTENT BLOCK + CHECKLIST ============ */
.lp-page-v2 .bk-cblock {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}
@media (max-width: 1080px) { .lp-page-v2 .bk-cblock { grid-template-columns: 1fr; gap: 40px; } }

.lp-page-v2 .bk-checklist {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bk-radius-card-lg);
  padding: 28px;
  box-shadow: var(--bk-shadow-signature);
}
.lp-page-v2 .bk-checklist__head {
  font: 800 13px/1 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-cyan);
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.lp-page-v2 .bk-checklist__row {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 14px; align-items: start;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.lp-page-v2 .bk-checklist__row:last-child { border-bottom: 0; }
.lp-page-v2 .bk-checklist__mark {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  margin-top: 2px;
}
.lp-page-v2 .bk-checklist__mark--yes { background: rgba(49,228,139,0.15); color: var(--bk-green); }
.lp-page-v2 .bk-checklist__mark--no  { background: rgba(239,68,68,0.15);  color: #FCA5A5; }
.lp-page-v2 .bk-checklist__t { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.4; margin-bottom: 4px; }
.lp-page-v2 .bk-checklist__d { color: var(--bk-cyan-body); font-size: 13px; line-height: 1.5; }
.lp-page-v2 .bk-checklist__row--no .bk-checklist__t { color: rgba(255,255,255,0.6); }

.lp-page-v2 .bk-cblock__body p {
  font-size: 17px; line-height: 1.6; color: var(--bk-cyan-body);
  margin: 0 0 16px;
}
.lp-page-v2 .bk-cblock__body ul { list-style: none; padding: 0; margin: 16px 0; }
.lp-page-v2 .bk-cblock__body ul li {
  padding: 8px 0 8px 28px; position: relative;
  font-size: 16px; line-height: 1.5; color: var(--bk-cyan-body);
}
.lp-page-v2 .bk-cblock__body ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 2px; background: var(--bk-blue);
}

/* ============ HERO PAYOUT FLOW VISUAL ============ */
.lp-page-v2 .bk-payflow {
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 32px 28px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.lp-page-v2 .bk-payflow::before {
  content: ""; position: absolute;
  top: -1px; left: 32px; right: 32px; height: 3px;
  background: linear-gradient(90deg, transparent, #7ECFFD, transparent);
  border-radius: 0 0 3px 3px; opacity: .9;
}
.lp-page-v2 .bk-payflow__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.lp-page-v2 .bk-payflow__label {
  font: 800 11px/1 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: #B5DCFF;
}
.lp-page-v2 .bk-payflow__amt {
  font-family: var(--bk-font-display);
  font-size: 32px; line-height: 1;
  color: #fff;
}
.lp-page-v2 .bk-payflow__amt span {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-page-v2 .bk-payflow__rail {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 22px;
}

.lp-page-v2 .bk-pf-node {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  opacity: .55;
}
.lp-page-v2 .bk-pf-node.is-on {
  opacity: 1;
  background: rgba(0,141,243,0.14);
  border-color: rgba(0,141,243,0.50);
  box-shadow: 0 0 0 1px rgba(0,141,243,0.20), 0 8px 24px rgba(0,141,243,0.18);
}
.lp-page-v2 .bk-pf-node__icon {
  width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  color: #B5DCFF;
  transition: all .35s ease;
}
.lp-page-v2 .bk-pf-node.is-on .bk-pf-node__icon {
  background: rgba(0,141,243,0.22);
  border-color: rgba(0,141,243,0.55);
  color: #fff;
}
.lp-page-v2 .bk-pf-node.is-busy .bk-pf-node__icon { animation: bk-pf-spin 1.4s linear infinite; }
.lp-page-v2 .bk-pf-node--success .bk-pf-node__icon {
  background: rgba(49,228,139,0.22) !important;
  border-color: rgba(49,228,139,0.55) !important;
  color: var(--bk-green) !important;
}
.lp-page-v2 .bk-pf-node__title {
  font: 800 11px/1.2 var(--bk-font-body);
  font-style: italic; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}
.lp-page-v2 .bk-pf-node__sub { font: 600 12px/1.3 var(--bk-font-body); color: #C8E4FF; }
.lp-page-v2 .bk-pf-node--success .bk-pf-node__sub { color: var(--bk-green); }

.lp-page-v2 .bk-pf-conn { position: relative; align-self: center; height: 2px; margin-top: 18px; }
.lp-page-v2 .bk-pf-conn__line {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px);
  border-radius: 2px;
}
.lp-page-v2 .bk-pf-pulse {
  position: absolute;
  top: -3px; left: -8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bk-blue);
  box-shadow: 0 0 12px var(--bk-blue), 0 0 4px #fff;
  opacity: 0;
}
.lp-page-v2 .bk-pf-pulse.is-run { animation: bk-pf-travel 1.1s cubic-bezier(.4,.0,.2,1) forwards; }
@keyframes bk-pf-travel {
  0%   { left: -8px;  opacity: 0; transform: scale(.6); }
  15%  { opacity: 1;  transform: scale(1.2); }
  85%  { opacity: 1;  transform: scale(1); }
  100% { left: calc(100% + 0px); opacity: 0; transform: scale(.6); }
}
@keyframes bk-pf-spin { to { transform: rotate(360deg); } }

.lp-page-v2 .bk-payflow__receipt {
  background: rgba(0,141,243,0.10);
  border: 1px solid rgba(0,141,243,0.28);
  border-radius: 16px;
  padding: 18px 20px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
  transition: all .4s ease;
}
.lp-page-v2 .bk-payflow__receipt.is-on {
  background: rgba(49,228,139,0.10);
  border-color: rgba(49,228,139,0.40);
}
.lp-page-v2 .bk-payflow__receipt-status {
  font: 800 11px/1 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-page-v2 .bk-payflow__receipt.is-on .bk-payflow__receipt-status { color: var(--bk-green); }
.lp-page-v2 .bk-payflow__receipt-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bk-blue);
  box-shadow: 0 0 0 4px rgba(0,141,243,0.20);
  animation: bk-pulse 1.6s infinite;
  transition: background .3s ease, box-shadow .3s ease;
}
.lp-page-v2 .bk-payflow__receipt.is-on .bk-payflow__receipt-status .dot {
  background: var(--bk-green);
  box-shadow: 0 0 0 4px rgba(49,228,139,0.22);
}
.lp-page-v2 .bk-payflow__receipt-when { font-size: 13px; color: #DCEEFF; }
.lp-page-v2 .bk-payflow__receipt-amt {
  font-family: var(--bk-font-display);
  font-size: 30px; line-height: 1;
  color: #fff;
  transition: color .3s ease;
  font-variant-numeric: tabular-nums;
}
.lp-page-v2 .bk-payflow__receipt.is-on .bk-payflow__receipt-amt { color: var(--bk-green); }

@media (max-width: 640px) {
  .lp-page-v2 .bk-payflow__rail { grid-template-columns: 1fr; gap: 8px; }
  .lp-page-v2 .bk-pf-conn { height: 18px; width: 2px; margin: 0 auto; justify-self: center; }
  .lp-page-v2 .bk-pf-conn__line {
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px);
  }
  .lp-page-v2 .bk-pf-pulse.is-run { animation: bk-pf-travel-v 1.1s cubic-bezier(.4,.0,.2,1) forwards; }
  @keyframes bk-pf-travel-v {
    0%   { top: -8px;  left: -3px; opacity: 0; }
    15%  { opacity: 1; }
    100% { top: 100%;  opacity: 0; }
  }
}

/* ============ LEADERBOARD ============ */
.lp-page-v2 .bk-lb {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  box-shadow: var(--bk-shadow-signature);
  overflow: hidden;
}
.lp-page-v2 .bk-lb__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--bk-border);
  flex-wrap: wrap; gap: 12px;
}
.lp-page-v2 .bk-lb__title {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 13px/1.3 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-text-heading);
}
.lp-page-v2 .bk-lb__live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bk-green);
  box-shadow: 0 0 0 4px rgba(49,228,139,0.18);
  animation: bk-pulse 2s infinite;
}
.lp-page-v2 .bk-lb__link { font: 600 13px/1 var(--bk-font-body); color: var(--bk-blue); letter-spacing: 0.5px; }
.lp-page-v2 .bk-lb table { width: 100%; border-collapse: collapse; }
.lp-page-v2 .bk-lb thead { background: #004B87; }
.lp-page-v2 .bk-lb thead th {
  padding: 14px 28px;
  font: 800 11px/1 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; text-align: left;
}
.lp-page-v2 .bk-lb thead th:nth-child(3),
.lp-page-v2 .bk-lb thead th:nth-child(4) { text-align: right; }
.lp-page-v2 .bk-lb tbody td {
  padding: 16px 28px;
  border-bottom: 1px solid var(--bk-border);
  font-size: 15px;
  color: var(--bk-text-heading);
}
/* Top earner gets a single subtle highlight row; all other rows are clean
   white with a hairline divider (replaces the old per-cell zebra that only
   shaded columns 2 and 4 on even rows). */
.lp-page-v2 .bk-lb tbody tr:first-child td { background: #FFFCF3; }
.lp-page-v2 .bk-lb tbody tr:last-child td { border-bottom: 0; }
.lp-page-v2 .bk-lb__rank {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--bk-font-body);
  background: #ECF0F8; color: var(--bk-text-cool);
}
.lp-page-v2 .bk-lb__rank--1 { background: #F5B217; color: #5A3D00; }
.lp-page-v2 .bk-lb__rank--2 { background: #C8CCD4; color: #2C3038; }
.lp-page-v2 .bk-lb__rank--3 { background: #CD8B5E; color: #3A1D08; }
.lp-page-v2 .bk-lb__earn {
  text-align: right;
  font-family: var(--bk-font-body);
  font-size: 16px; font-weight: 700; color: var(--bk-blue);
  font-variant-numeric: tabular-nums;
}
.lp-page-v2 .bk-lb__last { text-align: right; color: var(--bk-text-meta-dark); font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-page-v2 .bk-lb__disc {
  padding: 16px 28px;
  background: #F8F9FC;
  border-top: 1px solid var(--bk-border);
  font-size: 13px; color: var(--bk-text-cool); line-height: 1.5;
}

.lp-page-v2 .bk-lb-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; margin-top: 32px;
}
@media (max-width: 1080px) { .lp-page-v2 .bk-lb-cards { grid-template-columns: 1fr; } }
.lp-page-v2 .bk-lb-card {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  padding: 28px;
  box-shadow: var(--bk-shadow-testimonial);
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 20px; align-items: center;
}
@media (max-width: 640px) { .lp-page-v2 .bk-lb-card { grid-template-columns: 1fr; text-align: left; } }
.lp-page-v2 .bk-lb-card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(0,141,243,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bk-blue);
}
.lp-page-v2 .bk-lb-card__t {
  font: 800 14px/1.2 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-text-heading); margin: 0 0 6px;
}
.lp-page-v2 .bk-lb-card__d { font-size: 14px; color: var(--bk-text-cool); margin: 0; line-height: 1.5; }

@keyframes bk-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(49,228,139,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(49,228,139,0.0); }
}

/* ============ QUIZ ============ */
.lp-page-v2 .bk-quiz {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: 32px;
  padding: 48px;
  box-shadow: var(--bk-shadow-signature);
  position: relative;
}
@media (max-width: 640px) { .lp-page-v2 .bk-quiz { padding: 28px; } }
.lp-page-v2 .bk-quiz::before {
  content: ""; position: absolute;
  top: 0; left: 40px; right: 40px; height: 4px;
  background: var(--bk-gradient-title-horiz);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
.lp-page-v2 .bk-quiz__step { margin-bottom: 36px; }
.lp-page-v2 .bk-quiz__step:last-of-type { margin-bottom: 0; }
.lp-page-v2 .bk-quiz__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lp-page-v2 .bk-quiz__num {
  width: 36px; height: 36px; border-radius: 50%;
  /* flex-shrink: 0 is load-bearing, not tidying. This is a flex child of
     .bk-quiz__head next to a long uppercase label; with the default
     flex-shrink: 1 the browser steals width from the 36px badge while its
     height stays 36px, so the circle renders as a vertical ellipse. Measured
     on a1-trust-new before this fix: step 1 was 19.5x36 at 390px and 14.4x36
     at 320px, worst on the longest label. Desktop hid it because the label
     fits one line and nothing needs to shrink. */
  flex-shrink: 0;
  background: var(--bk-blue); color: #fff;
  font-family: var(--bk-font-display); font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lp-page-v2 .bk-quiz__label {
  font: 800 14px/1.3 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-text-heading);
}
.lp-page-v2 .bk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-page-v2 .bk-pill {
  background: #fff;
  border: 1px solid var(--bk-border-input);
  color: var(--bk-text-cool);
  padding: 10px 22px;
  border-radius: var(--bk-radius-pill);
  font: 600 14px/1 var(--bk-font-body);
  letter-spacing: 0.5px;
  transition: all .2s ease;
}
.lp-page-v2 .bk-pill:hover { color: var(--bk-blue); border-color: var(--bk-blue); }
.lp-page-v2 .bk-pill.is-active { background: var(--bk-blue); color: #fff; border-color: var(--bk-blue); }

.lp-page-v2 .bk-qcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp-page-v2 .bk-qcards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .lp-page-v2 .bk-qcards,
  .lp-page-v2 .bk-qcards--3 { grid-template-columns: 1fr; }
}
.lp-page-v2 .bk-qcard {
  text-align: left;
  background: #fff;
  border: 1px solid var(--bk-border-input);
  border-radius: 12px;
  padding: 16px 18px;
  font: 500 15px/1.4 var(--bk-font-body);
  color: var(--bk-text-heading);
  transition: all .2s ease;
}
.lp-page-v2 .bk-qcard:hover { border-color: var(--bk-blue); }
.lp-page-v2 .bk-qcard.is-active {
  border-color: var(--bk-blue);
  background: var(--bk-bg-info-light);
  box-shadow: 0 0 0 3px rgba(0,141,243,0.10);
}
.lp-page-v2 .bk-qcard__t {
  font: 700 15px/1.3 var(--bk-font-body);
  color: var(--bk-text-heading);
  margin-bottom: 4px;
}
.lp-page-v2 .bk-qcard__d {
  font: 400 13px/1.45 var(--bk-font-body);
  color: var(--bk-text-cool);
}

.lp-page-v2 .bk-quiz__result {
  margin-top: 36px;
  background: var(--bk-darkblue);
  color: #fff;
  border-radius: var(--bk-radius-card-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
  animation: qr-in .35s cubic-bezier(.16,1,.3,1);
}
@keyframes qr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lp-page-v2 .bk-quiz__result::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(closest-side, rgba(0,141,243,0.25), transparent 70%);
  pointer-events: none;
}
.lp-page-v2 .bk-quiz__result-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: center;
}
@media (max-width: 1080px) { .lp-page-v2 .bk-quiz__result-grid { grid-template-columns: 1fr; } }
.lp-page-v2 .bk-quiz__result-rec {
  font: 800 12px/1.3 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-cyan); margin-bottom: 8px;
}
.lp-page-v2 .bk-quiz__result-name {
  font-family: var(--bk-font-display);
  font-size: 36px; line-height: 1.1;
  color: #fff; margin: 0 0 12px;
}
.lp-page-v2 .bk-quiz__result-specs { font-size: 14px; color: var(--bk-cyan-body); }
.lp-page-v2 .bk-quiz__result-specs b { color: #fff; font-weight: 600; }
.lp-page-v2 .bk-quiz__result-price {
  font-family: var(--bk-font-display);
  font-size: 56px; line-height: 1;
  color: var(--bk-blue); margin-bottom: 6px;
}
.lp-page-v2 .bk-quiz__result-meta {
  font: 600 12px/1.3 var(--bk-font-body);
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bk-cyan-body); margin-bottom: 18px;
}
.lp-page-v2 .bk-quiz__fallback {
  text-align: center; margin-top: 18px;
  font-size: 14px; color: var(--bk-text-cool);
}
.lp-page-v2 .bk-quiz__fallback a { color: var(--bk-blue); }

/* ============ PRICING MODULE ============ */
.lp-page-v2 .bk-size-toolbar {
  display: inline-flex; gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bk-radius-pill);
  margin: 0 auto 40px;
}
.lp-page-v2 .bk-size-toolbar__wrap { text-align: center; margin-bottom: 32px; }
.lp-page-v2 .bk-size-toolbar button {
  background: transparent; border: 0;
  padding: 10px 20px;
  border-radius: var(--bk-radius-pill);
  color: rgba(255,255,255,0.72);
  font-weight: 600; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.lp-page-v2 .bk-size-toolbar button:hover { color: #fff; }
.lp-page-v2 .bk-size-toolbar button.is-active {
  background: var(--bk-gradient-cta-desktop);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,141,243,0.35);
}

.lp-page-v2 .bk-price-grid {
  display: grid;
  /* Column count tracks the live plan lineup. The wrapper PHP
     (a1-trust-new.php / b1-breakout-new.php) sets --plan-count inline from
     the size of the lp_plans matrix so removing a plan auto-centres the
     remaining cards. Mobile breakpoints below override to 2-col / 1-col. */
  grid-template-columns: repeat(var(--plan-count, 3), 1fr);
  gap: 20px;
}
@media (max-width: 1080px) { .lp-page-v2 .bk-price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lp-page-v2 .bk-price-grid { grid-template-columns: 1fr; } }

/* Mobile: keep all 6 size buttons reachable by allowing horizontal scroll
   inside the pill. Without this, the inline-flex toolbar overflows past the
   viewport and html/body's `overflow-x: clip` hides the rightmost button
   ($200K) with no way to scroll to it. Mirrors the /pricing/ page fix. */
@media (max-width: 640px) {
  .lp-page-v2 .bk-size-toolbar {
    display: flex;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-page-v2 .bk-size-toolbar::-webkit-scrollbar { display: none; }
  .lp-page-v2 .bk-size-toolbar button {
    flex-shrink: 0;
    padding: 10px 16px;
  }
}

.lp-page-v2 .bk-price {
  position: relative;
  padding: 32px 28px;
  background: #0F2544;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bk-radius-card-lg);
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lp-page-v2 .bk-price:hover {
  transform: translateY(-4px);
  border-color: rgba(126,207,253,0.35);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
}
.lp-page-v2 .bk-price--feat {
  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);
}
.lp-page-v2 .bk-price--feat::before {
  content: ""; position: absolute;
  top: 0; left: 32px; right: 32px; height: 4px;
  background: var(--bk-cyan);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
.lp-page-v2 .bk-price--unavail { opacity: .35; pointer-events: none; filter: saturate(.4); }

.lp-page-v2 .bk-price__badge-slot { height: 24px; margin-bottom: 16px; display: flex; }
.lp-page-v2 .bk-badge {
  font: 800 11px/1 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--bk-radius-pill);
}
.lp-page-v2 .bk-badge--popular { background: var(--bk-blue); color: #fff; }
.lp-page-v2 .bk-badge--price { background: rgba(126,207,253,0.15); color: var(--bk-cyan); border: 1px solid rgba(126,207,253,0.3); }

.lp-page-v2 .bk-price__name { font-family: var(--bk-font-display); font-size: 26px; line-height: 1.15; color: #fff; margin: 0 0 6px; }
.lp-page-v2 .bk-price__kicker {
  font: 600 12px/1.3 var(--bk-font-body);
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bk-cyan-body); margin: 0 0 24px;
}
.lp-page-v2 .bk-price__amount { font-family: var(--bk-font-display); font-size: 56px; line-height: 1; color: var(--bk-blue); margin-bottom: 6px; }
.lp-page-v2 .bk-price__sub {
  font: 600 12px/1.3 var(--bk-font-body);
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bk-cyan-body); margin: 0 0 24px;
}
.lp-page-v2 .bk-price__specs { list-style: none; padding: 0; margin: 0 0 24px; }
.lp-page-v2 .bk-price__specs li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.lp-page-v2 .bk-price__specs li:last-child { border-bottom: 0; }
.lp-page-v2 .bk-price__specs .lbl { color: var(--bk-cyan-body); }
.lp-page-v2 .bk-price__specs .val { color: #fff; font-weight: 600; }
.lp-page-v2 .bk-price__cta { margin-top: auto; }
.lp-page-v2 .bk-price__upgrade {
  text-align: center; margin-top: 12px;
  font-size: 12px; color: var(--bk-cyan-body);
}
.lp-page-v2 .bk-price__upgrade b { color: #fff; }
.lp-page-v2 .bk-price-note {
  text-align: center; margin-top: 36px;
  font: 500 14px/1.5 var(--bk-font-body);
  color: var(--bk-cyan-body);
}

/* ============ TESTIMONIALS ============ */
.lp-page-v2 .bk-tp-summary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-pill);
  box-shadow: var(--bk-shadow-testimonial);
  margin: 0 auto 56px;
}
.lp-page-v2 .bk-tp-summary__stars { color: #00B67A; letter-spacing: 2px; font-size: 18px; }
.lp-page-v2 .bk-tp-summary__brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 16px;
  color: var(--bk-text-heading);
  letter-spacing: -0.01em;
}
.lp-page-v2 .bk-tp-summary__brand svg { display: block; }
.lp-page-v2 .bk-tp-summary b { color: var(--bk-text-heading); font-weight: 700; font-size: 16px; }
.lp-page-v2 .bk-tp-summary__sep { color: var(--bk-text-meta); }
.lp-page-v2 .bk-tp-summary__sub { color: var(--bk-text-cool); font-size: 14px; }

.lp-page-v2 .bk-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 1080px) { .lp-page-v2 .bk-quotes { grid-template-columns: 1fr; } }

.lp-page-v2 .bk-quote {
  position: relative;
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  padding: 32px 28px;
  box-shadow: var(--bk-shadow-testimonial);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-page-v2 .bk-quote::before {
  content: ""; position: absolute;
  top: 0; left: 24px; right: 24px; height: 4px;
  background: var(--bk-gradient-title-horiz);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
.lp-page-v2 .bk-quote:hover { transform: translateY(-4px); box-shadow: var(--bk-shadow-testimonial-hover); }
.lp-page-v2 .bk-quote__stars { color: #00B67A; letter-spacing: 2px; font-size: 16px; margin-bottom: 16px; }
.lp-page-v2 .bk-quote__body {
  font: 400 16px/1.6 var(--bk-font-body);
  color: var(--bk-text-cool);
  margin: 0 0 24px;
  flex: 1;
}
.lp-page-v2 .bk-quote__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px;
  border-top: 1px dashed var(--bk-border);
  font-size: 13px; color: var(--bk-text-muted);
}
.lp-page-v2 .bk-quote__name { color: var(--bk-text-heading); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }

/* ============ FAIR RULES ============ */
.lp-page-v2 .bk-rulebox {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  padding: 28px;
  box-shadow: var(--bk-shadow-testimonial);
}
.lp-page-v2 .bk-rulebox__row {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 20px; align-items: start;
  padding: 18px 0;
  border-bottom: 1px dashed var(--bk-border);
}
.lp-page-v2 .bk-rulebox__row:last-child { border-bottom: 0; }
.lp-page-v2 .bk-rulebox__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(0,141,243,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bk-blue);
}
.lp-page-v2 .bk-rulebox__t {
  font: 800 15px/1.3 var(--bk-font-body);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-text-heading); margin: 0 0 6px;
}
.lp-page-v2 .bk-rulebox__d { font-size: 14px; color: var(--bk-text-cool); margin: 0; line-height: 1.5; }
.lp-page-v2 .bk-proofbanner {
  margin-top: 16px;
  background: rgba(0,141,243,0.08);
  border: 1px solid rgba(0,141,243,0.25);
  color: var(--bk-text-heading);
  padding: 14px 18px;
  border-radius: var(--bk-radius-card);
  font: 600 14px/1.4 var(--bk-font-body);
  display: inline-flex; align-items: center; gap: 10px;
}
.lp-page-v2 .bk-proofbanner svg { color: var(--bk-blue); }

/* ============ CLOSING CTA ============ */
.lp-page-v2 .bk-close-cta {
  position: relative;
  padding: 96px 0;
  background: linear-gradient(180deg, var(--bk-darkblue) 0%, #051426 100%);
  color: #fff;
  text-align: center;
  isolation: isolate;
  /* Clip the 800px-wide ::before glow so it can't push the body wider
     than the viewport on mobile (the global Timber footer doesn't enforce
     overflow either, so a runaway pseudo-element here would force a
     horizontal scroll on the whole page). */
  overflow: hidden;
}
.lp-page-v2 .bk-close-cta::before {
  content: "";
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(closest-side, rgba(0,141,243,0.18), transparent 70%);
  filter: blur(20px);
  pointer-events: none; z-index: -1;
}
.lp-page-v2 .bk-close-cta__in { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ============ VERIFY LINKS ============ */
.lp-page-v2 .bk-verify {
  display: inline-flex; align-items: center; gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap; justify-content: center;
}
.lp-page-v2 .bk-verify--centered { display: flex; margin-top: 36px; gap: 32px; }
.lp-page-v2 .bk-verify a {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--bk-font-body);
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--bk-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(165,222,253,0.3);
  text-underline-offset: 4px;
  padding: 6px 0;
  transition: color .2s ease;
}
.lp-page-v2 .bk-verify a:hover { color: #fff; }

/* ===== Section padding mobile ===== */
@media (max-width: 640px) {
  .lp-page-v2 .bk-section { padding: 80px 0; }
  .lp-page-v2 .bk-hero { padding: calc(96px + 78px) 0 80px; }
}

/* ===== Reduced-motion: pin PayoutFlow on success state, disable pulses ===== */
@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .bk-pf-pulse,
  .lp-page-v2 .bk-payflow__receipt-status .dot,
  .lp-page-v2 .bk-lb__live { animation: none !important; }
  .lp-page-v2 .bk-pf-node { opacity: 1; background: rgba(0,141,243,0.14); border-color: rgba(0,141,243,0.50); }
  .lp-page-v2 .bk-pf-node--success .bk-pf-node__icon { background: rgba(49,228,139,0.22) !important; border-color: rgba(49,228,139,0.55) !important; color: var(--bk-green) !important; }
  .lp-page-v2 .bk-payflow__receipt { background: rgba(49,228,139,0.10); border-color: rgba(49,228,139,0.40); }
  .lp-page-v2 .bk-payflow__receipt-status,
  .lp-page-v2 .bk-payflow__receipt-amt { color: var(--bk-green); }
}

/* ============================================================
   B1 — Verbatim port of b1-styles.css from the design handoff,
   scoped to .lp-page-v2. Used by /lp/b1-breakout-new/. Three
   self-contained pieces: hero RuleCompare card, Problem tile
   grid, FAQ grid. All untouched A1 styling above is shared.
   ============================================================ */

/* ---------- RuleCompare card (hero side-by-side) ---------- */
.lp-page-v2 .bk-rc {
  position: relative;
  background: rgba(8, 18, 36, 0.55);
  border: 1px solid rgba(126,207,253,0.22);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.lp-page-v2 .bk-rc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lp-page-v2 .bk-rc__col { padding: 28px 28px 30px; min-width: 0; }
.lp-page-v2 .bk-rc__col + .bk-rc__col { border-left: 1px solid rgba(126,207,253,0.12); }

.lp-page-v2 .bk-rc__col--bad .bk-rc__h { color: #FFB4B4; }
.lp-page-v2 .bk-rc__col--good {
  background: linear-gradient(180deg, rgba(0,141,243,0.10), rgba(0,141,243,0.03));
}
.lp-page-v2 .bk-rc__col--good .bk-rc__h { color: #7ECFFD; }
@keyframes bk-rc-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(126,207,253,0.18), 0 0 24px rgba(0,141,243,0.08); }
  50%      { box-shadow: inset 0 0 0 1px rgba(126,207,253,0.35), 0 0 36px rgba(0,141,243,0.20); }
}

.lp-page-v2 .bk-rc__h {
  display: flex; align-items: center; gap: 9px;
  font: 700 14.5px/1 var(--bk-font-body);
  letter-spacing: 0.4px;
  margin-bottom: 20px;
}
.lp-page-v2 .bk-rc__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .85; }

.lp-page-v2 .bk-rc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-page-v2 .bk-rc__item {
  display: flex; gap: 12px; align-items: flex-start;
  font: 500 15.5px/1.35 var(--bk-font-body);
  color: #fff;
}
.lp-page-v2 .bk-rc__col--bad .bk-rc__item { color: rgba(255,255,255,0.78); }

.lp-page-v2 .bk-rc__mark {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .6s ease, background .6s ease;
}
.lp-page-v2 .bk-rc__mark svg { width: 13px; height: 13px; }
.lp-page-v2 .bk-rc__mark--x { background: rgba(255, 86, 86, 0.18); color: #FF8E8E; }
.lp-page-v2 .bk-rc__mark--c { background: rgba(49, 228, 139, 0.18); color: #31E48B; }

.lp-page-v2 .bk-rc__item--bad {
  margin: -4px -8px; padding: 4px 8px; border-radius: 6px;
  transition: background .6s ease, color .6s ease;
}
.lp-page-v2 .bk-rc__item--bad.is-hot {
  background: rgba(255, 86, 86, 0.10);
  color: #FFD0D0;
}
.lp-page-v2 .bk-rc__item--bad.is-hot .bk-rc__mark--x {
  transform: scale(1.12);
  background: rgba(255, 86, 86, 0.30);
}

.lp-page-v2 .bk-rc__foot {
  grid-column: 1 / -1;
  padding: 20px 28px;
  border-top: 1px solid rgba(126,207,253,0.12);
  background: rgba(255,255,255,0.02);
}
.lp-page-v2 .bk-rc__foot-eyebrow {
  font: 600 12px/1 var(--bk-font-body);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #A5DEFD;
  margin-bottom: 5px;
}
.lp-page-v2 .bk-rc__foot-t { font: 600 16px/1.4 var(--bk-font-body); color: #fff; }

@media (max-width: 640px) {
  .lp-page-v2 .bk-rc__grid { grid-template-columns: 1fr; }
  .lp-page-v2 .bk-rc__col + .bk-rc__col { border-left: 0; border-top: 1px solid rgba(126,207,253,0.12); }
}

/* ---------- Problem tile grid (B1 §03) ---------- */
.lp-page-v2 .bk-tilegrid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-page-v2 .bk-tile {
  position: relative;
  padding: 28px 24px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.lp-page-v2 .bk-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(0,141,243,0.40);
  background: linear-gradient(180deg, rgba(0,141,243,0.10) 0%, rgba(0,141,243,0.02) 100%);
}
.lp-page-v2 .bk-tile__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(0,141,243,0.14);
  border: 1px solid rgba(0,141,243,0.32);
  color: var(--bk-cyan);
  margin-bottom: 18px;
}
.lp-page-v2 .bk-tile__t {
  font-family: var(--bk-font-display);
  font-size: 22px; line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.lp-page-v2 .bk-tile__d {
  font: 400 14px/1.5 var(--bk-font-body);
  color: #C8E4FF;
  margin: 0;
}
@media (max-width: 960px) { .lp-page-v2 .bk-tilegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-page-v2 .bk-tilegrid { grid-template-columns: 1fr; } }

/* ---------- FAQ (B1 §07) — 2-col grid of cards ---------- */
.lp-page-v2 .bk-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-top: 40px;
  max-width: var(--bk-in-short);
  margin-left: auto; margin-right: auto;
}
.lp-page-v2 .bk-faq__item {
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card);
  box-shadow: 0 2px 8px rgba(6,26,49,0.04);
}
.lp-page-v2 .bk-faq__q {
  font-family: var(--bk-font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--bk-text-heading);
  margin: 0 0 10px;
}
.lp-page-v2 .bk-faq__a {
  font: 400 15px/1.55 var(--bk-font-body);
  color: var(--bk-text-cool);
  margin: 0;
}
@media (max-width: 880px) { .lp-page-v2 .bk-faq { grid-template-columns: 1fr; } }

/* ---------- Reduced motion: kill RuleCompare animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .bk-rc__col--good { animation: none !important; }
  .lp-page-v2 .bk-rc__item--bad,
  .lp-page-v2 .bk-rc__mark { transition: none !important; }
}

/* ============================================================
   LP v2 MOBILE PORT (Phase 2 of the July 2026 paid-LP mobile plan)
   Appended to landing-page-v2.css. Ports the homepage's shipped
   July 20 mobile adaptation (homepage.css:949-1176) onto the LP
   shared layer.

   SCOPING RULE: every rule in this block (except the two
   reduced-motion accessibility fixes at the bottom) requires the
   .lp-v2-m marker class that single-landing_page-v2.php adds to
   the .lp-page-v2 wrapper for every v2 slug EXCEPT 24off24.
   24off24 re-declares .bk-section/.bk-h2/.bk-titlebox/.bk-lede and
   .bk-price-grid in its own later-loaded stylesheet; without the
   marker gate these carousel rules would half-apply there (its
   grid-template-columns would win while grid-auto-flow leaked
   through) and mutate the promo page. The marker makes that
   structurally impossible.
   ============================================================ */

/* ---- Global rhythm and type (homepage.css:949-954) ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-section { padding: 64px 0; }
  .lp-page-v2.lp-v2-m .bk-titlebox { margin-bottom: 32px; }
  .lp-page-v2.lp-v2-m .bk-h2 { font-size: clamp(30px, 8.2vw, 38px); letter-spacing: -0.6px; }
  .lp-page-v2.lp-v2-m .bk-lede { font-size: 17px; }
}

/* ---- Hero r2-c rhythm (homepage.css:957-961; 78px = .lp-nav__inner
        height, vs the homepage's 72px global header) ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-hero { padding: calc(44px + 78px) 0 64px; }
  .lp-page-v2.lp-v2-m .bk-hero__title { font-size: 34px; letter-spacing: -0.8px; }
  .lp-page-v2.lp-v2-m .bk-hero__sub { font-size: 15px; margin-bottom: 24px; }
  .lp-page-v2.lp-v2-m .bk-hero__cta .bk-btn { width: 100%; max-width: 420px; padding: 16px 24px; }
  .lp-page-v2.lp-v2-m .bk-hero__in { gap: 36px; }
  .lp-page-v2.lp-v2-m .bk-hero__trust-row { margin-top: 24px; }
}

/* ---- Proof bar: 2+1 compact (pattern port of homepage.css:967-978;
        homepage uses .bk-proofrow, the LP layer uses .bk-proofbar) ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-proofbar__in { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lp-page-v2.lp-v2-m .bk-proofbar__item:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.10); }
  .lp-page-v2.lp-v2-m .bk-proofbar__item:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 16px;
  }
  .lp-page-v2.lp-v2-m .bk-proofbar__num { font-size: 26px; margin-bottom: 4px; }
  .lp-page-v2.lp-v2-m .bk-proofbar__lbl { font-size: 12px; letter-spacing: 1.5px; }
}

/* ---- Pricing: swipe carousel with next-card peek, featured card
        first (homepage.css:1023-1041; ordering hook is the existing
        .bk-price--feat class instead of the homepage's #price-pro) ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-price-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    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.lp-v2-m .bk-price-grid::-webkit-scrollbar { display: none; }
  .lp-page-v2.lp-v2-m .bk-price { scroll-snap-align: start; padding: 26px 22px; }
  .lp-page-v2.lp-v2-m .bk-price:hover { transform: none; }
  .lp-page-v2.lp-v2-m .bk-price__amount { font-size: 46px; }
  .lp-page-v2.lp-v2-m .bk-price--feat { order: -1; }

  /* Size toolbar affordance: right-edge fade signals the clipped
     $100K/$200K pills; 44px tap height on the size buttons. */
  .lp-page-v2.lp-v2-m .bk-size-toolbar__wrap { position: relative; }
  .lp-page-v2.lp-v2-m .bk-size-toolbar__wrap::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(90deg, rgba(6, 26, 49, 0), var(--bk-darkblue));
    pointer-events: none;
  }
  .lp-page-v2.lp-v2-m .bk-size-toolbar button { min-height: 44px; }
}

/* ---- Leaderboard: table becomes a rank list. No data dropped; the
        header row stays for screen readers. Light-surface adaptation
        of homepage.css:1045-1086 (the LP leaderboard card is white,
        so hairlines map to var(--bk-border) instead of white-alpha,
        and the top-earner highlight moves from td to tr). ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-lb thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lp-page-v2.lp-v2-m .bk-lb table,
  .lp-page-v2.lp-v2-m .bk-lb tbody { display: block; width: 100%; }
  .lp-page-v2.lp-v2-m .bk-lb tbody tr {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bk-border);
  }
  .lp-page-v2.lp-v2-m .bk-lb tbody td { display: block; padding: 0; border: 0; }
  .lp-page-v2.lp-v2-m .bk-lb tbody td:nth-child(1) { grid-row: 1 / 3; }
  .lp-page-v2.lp-v2-m .bk-lb tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 16px; }
  .lp-page-v2.lp-v2-m .bk-lb tbody td:nth-child(3) {
    grid-column: 3; grid-row: 1 / 3;
    text-align: right;
    font-size: 18px;
  }
  .lp-page-v2.lp-v2-m .bk-lb tbody td:nth-child(4) {
    grid-column: 2; grid-row: 2;
    text-align: left;
    font-size: 12px;
  }
  .lp-page-v2.lp-v2-m .bk-lb tbody td:nth-child(4)::before { content: "Last payout "; }
  .lp-page-v2.lp-v2-m .bk-lb tbody tr:first-child { background: #FFFCF3; }
  .lp-page-v2.lp-v2-m .bk-lb tbody tr:first-child td { background: none; }
  .lp-page-v2.lp-v2-m .bk-lb tbody tr:last-child { border-bottom: 0; }
  .lp-page-v2.lp-v2-m .bk-lb .bk-lb__rank { width: 30px; height: 30px; }
  .lp-page-v2.lp-v2-m .bk-lb__link { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-page-v2.lp-v2-m .bk-lb-cards { margin-top: 28px; gap: 14px; }
  .lp-page-v2.lp-v2-m .bk-lb-card { grid-template-columns: 44px 1fr; gap: 12px 14px; padding: 20px; }
  .lp-page-v2.lp-v2-m .bk-lb-card__icon { width: 44px; height: 44px; border-radius: 12px; }
  .lp-page-v2.lp-v2-m .bk-lb-card > a.bk-btn { grid-column: 1 / -1; width: 100%; }
}

/* ---- Trustpilot summary pill: allow a centered two-row wrap at
        phone widths instead of clipping off the right screen edge
        (fixes the A18 amputation; pill radius drops to card radius
        because a 100px pill reads broken across two rows). ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-tp-summary {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    column-gap: 10px;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: var(--bk-radius-card);
    margin-bottom: 32px;
  }
  .lp-page-v2.lp-v2-m .bk-tp-summary__stars { letter-spacing: 1px; font-size: 16px; }
  .lp-page-v2.lp-v2-m .bk-tp-summary__sub { font-size: 13px; }
  /* The pipe separators read as dangling orphans once the pill wraps;
     the wrap gaps do the separating on phones. */
  .lp-page-v2.lp-v2-m .bk-tp-summary__sep { display: none; }
}

/* ---- Testimonials: 1-up snap carousel with edge bleed and peek
        (homepage.css:869-882 base + :1136-1144 bleed). 680px matches
        the homepage's quotes foldover. Nav buttons are new markup in
        the four partials; pages without them (b1-breakout-new) still
        get a fully usable swipe carousel. ---- */
.lp-page-v2.lp-v2-m .bk-quotes-nav { display: none; }
@media (max-width: 680px) {
  .lp-page-v2.lp-v2-m .bk-quotes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 0 24px 8px;
    scroll-padding-left: 24px;
  }
  .lp-page-v2.lp-v2-m .bk-quotes::-webkit-scrollbar { display: none; }
  .lp-page-v2.lp-v2-m .bk-quote { scroll-snap-align: start; padding: 24px 22px; }
  .lp-page-v2.lp-v2-m .bk-quote:hover { transform: none; box-shadow: var(--bk-shadow-testimonial); }
  .lp-page-v2.lp-v2-m .bk-quotes-nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
  .lp-page-v2.lp-v2-m .bk-quotes-nav button {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid var(--bk-border-input);
    color: var(--bk-text-heading);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .2s ease, transform .2s ease;
  }
  .lp-page-v2.lp-v2-m .bk-quotes-nav button:hover { border-color: var(--bk-blue); }
}

/* ---- Micro-polish: 44px tap targets at decision points (quiz pills
        deliberately excluded, July 27 decision) + 12px type floor on
        badges and payflow micro-labels (A14). ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .lp-nav__cta { min-height: 44px; display: inline-flex; align-items: center; }
  .lp-page-v2.lp-v2-m .bk-verify a { min-height: 44px; align-items: center; }
}
/* Pre-existing at <=360px: the seeded "Choose an Evaluation" nav CTA
   overflows the viewport edge next to the logo (measured right edge
   340px in a 320px viewport on origin/main). Tighten it only there. */
@media (max-width: 360px) {
  .lp-page-v2.lp-v2-m .lp-nav__logo svg { width: 126px; height: 34px; }
  .lp-page-v2.lp-v2-m .lp-nav__cta { font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-badge { font-size: 12px; }
  .lp-page-v2.lp-v2-m .bk-payflow__label,
  .lp-page-v2.lp-v2-m .bk-pf-node__title,
  .lp-page-v2.lp-v2-m .bk-payflow__receipt-status { font-size: 12px; }
}

/* ---- Reduced-motion accessibility fixes (A21d). Deliberately NOT
        gated on .lp-v2-m: they correct gaps in the existing shared
        layer wherever it loads. 24off24 has no .bk-hero usage, so
        the hero rule is a no-op there. ---- */
@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .bk-hero { animation: none; }
  html.lp-html-v2 { scroll-behavior: auto; }
  .lp-page-v2 .bk-sticky-cta { transition: none !important; }
}

/* ---- Sticky mobile CTA (Phase 3): port of the homepage's shipped
        opt-in module (homepage.css:1146-1168). Inert unless the JS
        adds body.m-sticky from the per-page ACF toggle; the bar
        markup itself only renders when the toggle is on. ---- */
.lp-page-v2 .bk-sticky-cta { display: none; }
@media (max-width: 640px) {
  body.m-sticky .lp-page-v2 .bk-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 400;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 26, 49, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateY(105%);
    transition: transform .3s ease;
  }
  body.m-sticky .lp-page-v2 .bk-sticky-cta.is-on { transform: translateY(0); }
  body.m-sticky .lp-page-v2 .bk-sticky-cta.is-off { transform: translateY(105%); }
  .lp-page-v2 .bk-sticky-cta .bk-btn { width: 100%; padding: 14px 20px; font-size: 16px; font-weight: 700; }
  /* Lift the Intercom launcher clear of the bar while it is shown. */
  body.m-sticky.bk-sticky-visible .intercom-lightweight-app-launcher,
  body.m-sticky.bk-sticky-visible .intercom-launcher-frame { bottom: 84px !important; }
}

/* ---- Minimal /lp/ footer (paid pages; global footer stays on the
        site-branded slugs). ---- */
.lp-page-v2 .bk-lp-footer {
  background: #051426;
  color: var(--bk-text-meta);
  padding: 40px 0 calc(32px + env(safe-area-inset-bottom));
}
.lp-page-v2 .bk-lp-footer__in { max-width: var(--bk-in-wide); margin: 0 auto; padding: 0 24px; }
.lp-page-v2 .bk-lp-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.lp-page-v2 .bk-lp-footer__links a,
.lp-page-v2 .bk-lp-footer__cookies {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 13px/1 var(--bk-font-body); letter-spacing: 0.5px;
  color: var(--bk-cyan-body); background: none; border: 0; padding: 0;
  text-decoration: none; cursor: pointer;
}
.lp-page-v2 .bk-lp-footer__links a:hover { color: #fff; text-decoration: underline; }
.lp-page-v2 .bk-lp-footer__legal { font-size: 12px; line-height: 1.6; color: var(--bk-text-meta-dark); }
.lp-page-v2 .bk-lp-footer__legal p { font-size: 12px; color: var(--bk-text-meta-dark); margin: 0 0 10px; }
.lp-page-v2 .bk-lp-footer__copy { margin-top: 16px; font-size: 12px; color: var(--bk-text-meta-dark); }

/* ---- a1-trust-app hero: phone cropped to the payout-confirmed modal on
        phones (homepage rising-panel pattern). Desktop unchanged: the
        window div has no rules above 640px.

        The image is pinned to the BOTTOM of the window rather than pulled
        up by a percentage margin. A percentage margin-top resolves against
        the container WIDTH while the window height is fixed, so as the
        viewport narrows the render shrinks faster than the offset and the
        crop runs off the bottom of the image: measured 102% of the image at
        360px and 111% at 320px, i.e. dead space under the payout sheet on a
        transparent PNG. Bottom-pinning always frames the last N px of the
        render, at every width.

        TUNE with Matt on device: `height` is the only value to change; it
        is literally how much of the payout sheet is in frame. ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-app-hero__window {
    position: relative;
    height: 270px;
    overflow: hidden;
    border-radius: 18px;
    width: min(100%, 360px);
  }
  .lp-page-v2.lp-v2-m .bk-app-hero__window .bk-app-hero__img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    margin: 0;
  }
}

/* ---- a1-trust-new payflow: compact 3-across rail on phones (the
        desktop grid proves the horizontal form); receipt below. Node
        type stays at the 12px floor; icons shrink instead. ---- */
@media (max-width: 640px) {
  .lp-page-v2.lp-v2-m .bk-payflow { padding: 24px 16px 16px; }
  .lp-page-v2.lp-v2-m .bk-payflow__rail {
    grid-template-columns: 1fr 14px 1fr 14px 1fr;
    gap: 0;
    margin-bottom: 16px;
  }
  .lp-page-v2.lp-v2-m .bk-pf-node { padding: 12px 6px; }
  .lp-page-v2.lp-v2-m .bk-pf-node__icon { width: 32px; height: 32px; margin-bottom: 8px; }
  .lp-page-v2.lp-v2-m .bk-pf-node__title { letter-spacing: 1px; }
  .lp-page-v2.lp-v2-m .bk-pf-node__sub { font-size: 12px; }
  .lp-page-v2.lp-v2-m .bk-pf-conn { height: 2px; width: auto; margin: 26px 0 0; justify-self: stretch; }
  .lp-page-v2.lp-v2-m .bk-pf-conn__line {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px);
  }
  .lp-page-v2.lp-v2-m .bk-pf-pulse.is-run { animation: bk-pf-travel 1.1s cubic-bezier(.4,.0,.2,1) forwards; }
}

/* ---- Legal disclosures block, above the /lp/ footer (paid pages).

        The approved legal text must render "in a similar font to the rest of
        the page (not fine-print-hidden)", so body copy is 15px here, NOT the
        12px used for footer meta. Sits on the same deep navy as the footer so
        the page ends as one dark block rather than three bands. ---- */
.lp-page-v2 .bk-lp-disclosures {
  background: #051426;
  padding: 48px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-page-v2 .bk-lp-disclosures__in {
  max-width: var(--bk-in-wide);
  margin: 0 auto;
  padding: 0 24px;
}
.lp-page-v2 .bk-lp-disclosures__title {
  font: 600 15px/1.45 var(--bk-font-body);
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0;
}
.lp-page-v2 .bk-lp-disclosures p {
  font: 400 15px/1.65 var(--bk-font-body);
  color: var(--bk-text-meta);
  margin: 0 0 14px;
  max-width: 78ch;
}
.lp-page-v2 .bk-lp-disclosures p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .lp-page-v2 .bk-lp-disclosures { padding: 40px 0 8px; }
  .lp-page-v2 .bk-lp-disclosures__title { font-size: 14px; }
  /* Stays at 14px on phones: the legal requirement is that the disclosure
     reads like page copy, so it must not drop to the 12px meta floor. */
  .lp-page-v2 .bk-lp-disclosures p { font-size: 14px; line-height: 1.6; }
}

/* ============================================================
   Spark in the pricing module (September 2026).
   Data + markup: define/pricing-matrix-spark.php (wp-admin: Landing
   Pages → Pricing Matrix → "Spark (pricing modules)"). State:
   initSparkToggle() in this bundle's JS. Nothing here renders while
   the Spark switch is off. Same block lives in the other bundle's
   sheet on purpose (per-bundle duplication, engineering playbook §1).
   ============================================================ */
.lp-page-v2 .spk-grid[hidden], .lp-page-v2 .bk-price-grid[hidden] { display: none !important; }

/* Product toggle above the size bar: the primary control, so larger,
   sentence case, white active pill (the size bar keeps its gradient). */
.lp-page-v2 .spk-product-toggle__wrap { text-align: center; margin-bottom: 18px; }
.lp-page-v2 .spk-product-toggle {
  display: inline-flex; gap: 6px; padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bk-radius-pill);
}
.lp-page-v2 .spk-product-toggle button {
  background: transparent; border: 0;
  padding: 12px 22px; border-radius: var(--bk-radius-pill);
  color: rgba(255,255,255,0.72);
  font: 600 15px/1 var(--bk-font-body); letter-spacing: 0; text-transform: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  display: inline-flex; align-items: center; cursor: pointer;
}
.lp-page-v2 .spk-product-toggle button:hover { color: #fff; }
.lp-page-v2 .spk-product-toggle button[aria-selected="true"] { background: #fff; color: var(--bk-text-heading); box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.lp-page-v2 .spk-new {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font: 700 10px/1 var(--bk-font-body); letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; background: var(--bk-blue);
  padding: 4px 7px; border-radius: var(--bk-radius-pill);
}
/* Two-line tabs: each label carries an editable subcopy line (Pricing Matrix > Spark box). */
.lp-page-v2 .spk-product-toggle--sub button { flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 12px 28px; line-height: 1.2; }
.lp-page-v2 .spk-product-toggle__label { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 700; }
.lp-page-v2 .spk-product-toggle__sub { display: block; font: 500 11.5px/1.2 var(--bk-font-body); letter-spacing: 0; color: rgba(255,255,255,0.5); white-space: nowrap; transition: color .25s ease; }
.lp-page-v2 .spk-product-toggle button:hover .spk-product-toggle__sub { color: rgba(255,255,255,0.72); }
.lp-page-v2 .spk-product-toggle button[aria-selected="true"] .spk-product-toggle__sub { color: var(--bk-text-cool); }

/* Size bar in the Spark view: only the Spark-size pill stays, marked active. */
.lp-page-v2 .bk-size-toolbar__wrap.is-spark .bk-size-toolbar button:not(.spk-keep) { display: none; }
.lp-page-v2 .bk-size-toolbar__wrap.is-spark .bk-size-toolbar button.spk-keep { background: var(--bk-gradient-cta-desktop); color: #fff; box-shadow: 0 2px 12px rgba(0,141,243,0.35); cursor: default; }

/* The Spark view: card plus comparison panel. */
.lp-page-v2 .spk-grid {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  animation: spk-rise .28s ease both;
}
.lp-page-v2 .spk-grid--solo { grid-template-columns: minmax(0, calc((100% - 40px) / 3)); justify-content: center; }
@keyframes spk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-page-v2 .spk-grid { animation: none; } }

/* The Spark stage: deep navy, blue glow from the top right, film grain. */
.lp-page-v2 .spk-stage {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 58% 95% at 100% 0%, rgba(95,155,205,0.78) 0%, rgba(30,110,178,0.55) 26%, rgba(9,68,128,0.30) 52%, rgba(3,20,44,0) 78%),
    linear-gradient(106deg, rgba(126,207,253,0) 34%, rgba(126,207,253,0.09) 50%, rgba(126,207,253,0) 64%),
    linear-gradient(180deg, #08213F 0%, #04162C 100%);
  border: 1px solid rgba(126,207,253,0.30);
  box-shadow: 0 0 0 1px rgba(0,141,243,0.28), 0 24px 64px rgba(0,141,243,0.16);
}
.lp-page-v2 .spk-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/pricing/spark-grain-256.png");
  background-size: 256px 256px; background-repeat: repeat;
  mix-blend-mode: overlay; opacity: .55;
}
.lp-page-v2 .spk-stage > * { position: relative; z-index: 1; }

.lp-page-v2 .bk-badge--spark { background: var(--bk-blue); color: #fff; }
.lp-page-v2 .bk-badge--spark-low { background: rgba(126,207,253,0.15); color: var(--bk-cyan); border: 1px solid rgba(126,207,253,0.3); }
.lp-page-v2 .bk-badge--spark-out { background: #33465F; color: #C9D3E3; }
.lp-page-v2 .spk-release {
  font: 500 12px/1.3 var(--bk-font-body); color: var(--bk-cyan-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-page-v2 .spk-release::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bk-green); box-shadow: 0 0 0 3px rgba(49,228,139,0.18); }
.lp-page-v2 .spk-release--low::before { background: var(--bk-cyan); box-shadow: 0 0 0 3px rgba(126,207,253,0.18); }
.lp-page-v2 .spk-release--out::before { background: #6A7695; box-shadow: none; }
.lp-page-v2 .spk-link {
  color: var(--bk-cyan); font: 600 13px/1.3 var(--bk-font-body);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.lp-page-v2 .spk-link:hover { color: #fff; text-decoration: none; }
.lp-page-v2 .spk-link svg { width: 14px; height: 14px; flex: none; }

/* The Spark card: the standard price card on the stage. */
.lp-page-v2 .bk-price--spark .bk-price__amount { color: var(--bk-cyan); }
.lp-page-v2 .bk-price--spark .bk-price__badge-slot { gap: 10px 12px; align-items: center; flex-wrap: wrap; height: auto; min-height: 24px; }
.lp-page-v2 .bk-price--spark:hover { transform: translateY(-4px); }
.lp-page-v2 .bk-price--spark .bk-price__upgrade { margin-top: 14px; }
.lp-page-v2 .bk-price--spark .bk-btn--ghost-dark { border-color: rgba(255,255,255,0.32); }

/* The comparison panel. */
.lp-page-v2 .spk-diff {
  background: #0A2140;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bk-radius-card-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  color: #fff; min-width: 0;
}
.lp-page-v2 .spk-diff__title {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -0.3px;
  margin: 0 0 8px; color: #fff;
}
.lp-page-v2 .spk-diff__sub { margin: 0; font: 300 16px/1.45 var(--bk-font-body); color: var(--bk-cyan-body); }
.lp-page-v2 .spk-diff__list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.lp-page-v2 .spk-diff__list > div { padding: 14px 0 0; border-top: 1px dashed rgba(255,255,255,0.12); min-width: 0; }
.lp-page-v2 .spk-diff__list dt, .lp-page-v2 .spk-diff__footer dt { font: 600 12px/1.3 var(--bk-font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--bk-cyan); margin: 0 0 6px; }
.lp-page-v2 .spk-diff__list dd, .lp-page-v2 .spk-diff__footer dd { margin: 0; font: 300 15px/1.5 var(--bk-font-body); color: #DCEBFA; }
.lp-page-v2 .spk-diff__footer dd b, .lp-page-v2 .spk-diff__list dd b, .lp-page-v2 .spk-diff__list dd strong, .lp-page-v2 .spk-diff__footer dd strong { font-weight: 600; color: #fff; }
.lp-page-v2 .spk-diff__footer { margin: 0; padding: 14px 0 0; border-top: 1px dashed rgba(255,255,255,0.12); }
@media (min-width: 1081px) { .lp-page-v2 .spk-diff__title { white-space: nowrap; } }

@media (max-width: 1080px) {
  .lp-page-v2 .spk-grid { grid-template-columns: 1fr; }
  .lp-page-v2 .spk-grid--solo { grid-template-columns: minmax(0, calc((100% - 20px) / 2)); }
  .lp-page-v2 .spk-diff__title { font-size: clamp(24px, 3.4vw, 30px); }
}
@media (max-width: 640px) {
  .lp-page-v2 .spk-product-toggle__wrap { display: flex; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 18px; padding: 0 24px; }
  .lp-page-v2 .spk-product-toggle__wrap::-webkit-scrollbar { display: none; }
  .lp-page-v2 .spk-product-toggle button { padding: 11px 16px; font-size: 14px; flex: none; }
  /* With subcopy the two tabs share the full width instead of scrolling; the sub line may wrap on narrow phones. */
  .lp-page-v2 .spk-product-toggle--sub { flex: 1 1 auto; min-width: 0; gap: 4px; padding: 5px; }
  .lp-page-v2 .spk-product-toggle--sub button { flex: 1 1 0; min-width: 0; padding: 11px 6px; font-size: 13px; gap: 3px; container-type: inline-size; }
  /* Both lines scale with the tab (1cqi = 1% of the tab's content width), so the current copy stays on one line down to
     about 350px wide phones; the fixed sizes are the fallback for browsers without container units, and longer copy
     wraps as a last resort. Coefficients measured: longest sub 14.125em, longest label about 10em. */
  .lp-page-v2 .spk-product-toggle--sub .spk-product-toggle__label { font-size: 13px; font-size: clamp(11px, 9.6cqi, 13px); }
  .lp-page-v2 .spk-product-toggle--sub .spk-product-toggle__sub { font-size: 10.5px; font-size: clamp(9px, 6.9cqi, 10.5px); white-space: normal; text-align: center; text-wrap: balance; }
  .lp-page-v2 .spk-product-toggle--sub .spk-new { margin-left: 6px; }
  .lp-page-v2.lp-v2-m .spk-grid { padding-top: 4px; }
  .lp-page-v2 .spk-grid--solo { grid-template-columns: minmax(0, 1fr); }
  .lp-page-v2 .spk-diff { padding: 24px 22px; }
  .lp-page-v2 .spk-diff__title { font-size: 26px; }
  .lp-page-v2 .spk-diff__list { grid-template-columns: 1fr; gap: 14px; }
  .lp-page-v2 .bk-price--spark.bk-price { scroll-snap-align: start; }
}