/* ============================================================
   Homepage (Interim) stylesheet.
   Verbatim copy of the first style block of
   content/landing-pages/homepage/homepage-interim-wireframe.html
   (QA-passed July 22, 2026), with exactly two edits for the
   single-picture-element hero swap. See the implementation plan
   (website-files/homepage-interim-implementation/PLAN.md).
   Scoped under .lp-page-v2; loads only on the homepage-interim
   page (enqueue/homepage.php). Do not add font-face rules here;
   base.twig ships Inter + DM Serif Display sitewide.
   ============================================================ */
/* ============================================================
   Tokens: verbatim from landing-page-v2.css :root scope
   ============================================================ */
.lp-page-v2 {
  --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;

  --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%);

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

  --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;

  --bk-border: #ECF0F8;
  --bk-border-input: #DDE3F3;

  --bk-discord-purple: #5865F2;
  --bk-star-gold: #F5B217;
  --bk-tp-green: #00B67A;

  --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-radius-button: 8px;
  --bk-radius-comfort: 12px;
  --bk-radius-card: 16px;
  --bk-radius-card-lg: 24px;
  --bk-radius-pill: 100px;

  --bk-in-tiny: 840px;
  --bk-in-short: 1096px;
  --bk-in-wide: 1220px;
  --bk-in-feature: 1332px;

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

/* ============================================================
   Base
   ============================================================ */
html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
.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 a { color: var(--bk-blue); text-decoration: none; }
.lp-page-v2 a:hover { text-decoration: underline; }

.lp-page-v2 h1, .lp-page-v2 h2, .lp-page-v2 h3 { text-wrap: balance; }

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

/* Straight junctions everywhere: sections are flat bands, no rounded
   edges, no curved dividers (locked decision, July 17, 2026). */
.lp-page-v2 .bk-section { padding: 112px 0; }
.lp-page-v2 .bk-section--dark { background: var(--bk-darkblue); 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: 860px; margin: 0 auto 56px; }
.lp-page-v2 .bk-h2 {
  font-family: var(--bk-font-display); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 16px;
  color: var(--bk-text-heading);
}
.lp-page-v2 .bk-section--dark .bk-h2, .lp-page-v2 .on-dark .bk-h2 { color: #fff; }
.lp-page-v2 .bk-h2 span {
  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; max-width: 68ch; margin-left: auto; margin-right: auto;
  text-wrap: pretty;
}
.lp-page-v2 .bk-section--dark .bk-lede { color: var(--bk-cyan-body); }

/* ============ 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;
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.lp-page-v2 .bk-btn:hover { text-decoration: 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); }
.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(-2px); border-color: rgba(255,255,255,0.5); }
.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); }
.lp-page-v2 .bk-btn--large { padding: 16px 30px; font-size: 16px; }
.lp-page-v2 .bk-btn--block { width: 100%; }

/* ============ NAV ============
   The global nav is now a faithful reproduction of the LIVE breakoutprop.com
   header. Its CSS lives in the dedicated "LIVE GLOBAL NAV + FOOTER" style
   block after this one. Unchanged in this rework, preview only. */

/* ============ 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;
  /* The live global header has zero flow height and floats over the page
     (see the LIVE GLOBAL NAV + FOOTER block), so the hero starts at the
     top of the document and pads past the 80px floating controls. */
  padding: calc(84px + 80px) 0 0;
  overflow: hidden;
  /* Straight bottom edge: no border radius on the hero container. */
}
@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: block; text-align: center;
  padding-bottom: 0;
}
.lp-page-v2 .bk-hero__title {
  font-family: var(--bk-font-display);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 0 auto 20px;
  /* 28ch: wide enough that the explicit <br> controls the desktop break
     ("Keep 80-90% of the profits." is 27ch); phones still soft-wrap. */
  max-width: 28ch;
  text-wrap: balance;
  color: #fff;
}
.lp-page-v2 .bk-hero__title span {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lp-page-v2 .bk-hero__sub {
  font-size: 19px; font-weight: 300; line-height: 1.6;
  color: var(--bk-text-ice); max-width: 62ch;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.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; justify-content: center; }
/* Hero CTA: exact styling of the main "View pricing" CTA on the live
   /pricing/ page (.bk-btn.bk-btn--gradient.bk-btn--large per
   page-pricing.php + assets/css/pricing.css, Matt's request July 20). */
.lp-page-v2 .bk-hero__cta .bk-btn {
  gap: 10px;
  padding: 18px 44px;
  font-size: 17px; font-weight: 600; letter-spacing: normal; line-height: 1.2;
  border-radius: 8px;
  transition: transform .2s, box-shadow .2s, background .3s;
}
.lp-page-v2 .bk-hero__cta .bk-btn--gradient {
  background: var(--bk-gradient-cta-desktop);
  border: 1px solid var(--bk-blue);
  color: #fff;
  box-shadow: var(--bk-shadow-micro);
  position: relative; overflow: hidden;
}
.lp-page-v2 .bk-hero__cta .bk-btn--gradient:hover {
  background: var(--bk-gradient-cta-hover);
  transform: translateY(-2px);
  color: #fff;
}

/* Hero product visual (Matt's pick, July 20, 2026: r2-c from
   hero-visual-variants/review-board-r2.html): copy and CTA centered, and a
   frameless glass-edged terminal panel rising into view, cut off by the
   hero's straight bottom edge, Kraken Pro style. The hero gradient block
   runs to roughly 900px tall on desktop so about 55 to 60 percent of the
   terminal is visible before the cut. Real UI asset from product-ui/. */
.lp-page-v2 .bkrc-lift {
  position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%);
  width: 120%; max-width: 1480px; height: 60%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 141, 243, 0.30), rgba(0, 141, 243, 0) 70%);
}
.lp-page-v2 .bkrc-window {
  position: relative; max-width: 1060px; margin: 40px auto 0;
  /* Retuned July 2026 for the real 2086x1224 capture (1.704:1; the retired
     AI asset was 1.5:1): 372px shows 59.7 percent of the terminal at 1440,
     inside the locked 55 to 60 band, hero gradient-to-cut at 894px. */
  height: clamp(150px, 25.8vw, 372px); overflow: hidden;
  /* The window's square clip must round with the panel: anything painted in
     the notch between the panel's corner arc and the window's corner (a
     shadow, or a composited video layer edge) otherwise shows as a faint
     square-corner ghost against the hero gradient. */
  border-radius: 16px 16px 0 0;
}
.lp-page-v2 .bkrc-panel {
  border-radius: 16px 16px 0 0;
  /* No box-shadow here: the panel fills the overflow-hidden window edge to
     edge, so an upward shadow is clipped everywhere except inside the two
     top corner notches, where it painted the square-corner ghost. The lift
     glow comes from .bkrc-lift instead. */
}
.lp-page-v2 .bkrc-shot {
  position: relative; border-radius: 16px 16px 0 0; overflow: hidden; background: #0B0E14;
}
.lp-page-v2 .bkrc-shot img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* Animated hero option: the loop sits over the picture and fades in once
   homepage.js wires and plays it, so the static image doubles as poster,
   no-JS fallback and reduced-motion fallback. The 0.15 percent aspect
   difference between the 1600x938 encode and the 2086x1224 still is
   absorbed by object-fit: cover. */
.lp-page-v2 .bkrc-shot .bkrc-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
  /* Rounded on the element itself (like the img): Safari composites video
     on its own layer and can leak square corners through an ancestor's
     border-radius clip. */
  border-radius: inherit;
  opacity: 0; transition: opacity 0.3s ease;
}
.lp-page-v2 .bkrc-shot .bkrc-vid.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .bkrc-shot .bkrc-vid { display: none; }
}
.lp-page-v2 .bkrc-edge {
  position: absolute; inset: 0; border-radius: 16px 16px 0 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Corner safety for the real capture: its UI sits 20px in and 13px down at
   the top left (Breakout logo) and 16px in, 20px down at the top right
   (Funded Trader chip), giving max safe radii of 55 and 61 image px. From
   641 to 900px viewports the panel renders small enough that a 16px CSS
   radius would exceed 55 image px and shave the logo, so the radius drops
   to 12px (42.2 image px at the 641px worst case). Mobile at 640px and
   below swaps to the app screenshot and keeps its own rules. The window is
   in the group so its clip radius always matches the panel's. */
@media (min-width: 641px) and (max-width: 900px) {
  .lp-page-v2 .bkrc-window,
  .lp-page-v2 .bkrc-panel,
  .lp-page-v2 .bkrc-shot,
  .lp-page-v2 .bkrc-edge { border-radius: 12px 12px 0 0; }
}

/* Hero proof row: full width beneath the hero content, straight top edge. */
.lp-page-v2 .bk-proofrow {
  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 .bk-proofrow__in {
  max-width: var(--bk-in-wide); margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: 1fr 1fr 1.3fr;
  gap: 24px; align-items: center;
}
.lp-page-v2 .bk-proofrow__item { text-align: center; }
.lp-page-v2 .bk-proofrow__item + .bk-proofrow__item { border-left: 1px solid rgba(255,255,255,0.10); }
.lp-page-v2 .bk-proofrow__num {
  font-family: var(--bk-font-display);
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  margin-bottom: 6px; color: #fff;
}
.lp-page-v2 .bk-proofrow__num span {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-page-v2 .bk-proofrow__lbl {
  font: 600 12px/1.3 var(--bk-font-body);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bk-cyan-body);
}
.lp-page-v2 .bk-tp-unit {
  display: inline-flex; flex-direction: column; gap: 8px; align-items: center;
}
.lp-page-v2 .bk-tp-unit__row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lp-page-v2 .bk-tp-unit__word { font-family: var(--bk-font-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1; color: #fff; }
.lp-page-v2 .bk-tp-unit__brand { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--bk-font-body); color: #fff; }
.lp-page-v2 .bk-tp-unit__meta { font: 600 12px/1.3 var(--bk-font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--bk-cyan-body); }
.lp-page-v2 .bk-stars {
  position: relative; display: inline-block;
  line-height: 1; white-space: nowrap; vertical-align: middle;
  font-size: 18px;
}
.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: var(--bk-tp-green);
}
@media (max-width: 1080px) {
  .lp-page-v2 .bkrc-window { margin-top: 36px; }
}
@media (max-width: 640px) {
  .lp-page-v2 .bk-proofrow__in { grid-template-columns: 1fr; gap: 20px; }
  .lp-page-v2 .bk-proofrow__item + .bk-proofrow__item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); padding-top: 20px; }
}

/* Press strip: KILLED entirely (desktop and mobile), Matt's pick July 20, 2026. */

/* ============ TRANSPARENCY + PAYOUTS ============ */
.lp-page-v2 .bk-trust-card {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card-lg);
  box-shadow: var(--bk-shadow-signature);
  padding: clamp(32px, 4.5vw, 64px);
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.lp-page-v2 .bk-trust-card .bk-h2 { text-align: left; }
.lp-page-v2 .bk-trust-card .bk-lede { text-align: left; margin-left: 0; }
/* Trust checklist: stacked rows with green check marks, replacing the
   outlined pills (copy round July 22, 2026; Joel's note: pills were easy
   to miss with no hierarchy; Matt asked for a clear stacked checklist).
   Visual language shared with the step-two .bk-mini-check rows. */
/* Lead-in carries the bk-lede class so it matches the paragraph above it
   exactly (Matt, July 22); this rule only adds the spacing. */
.lp-page-v2 .bk-trust-leadin { margin-top: 26px; }
.lp-page-v2 .bk-trust-list {
  list-style: none; padding: 0;
  margin: 14px 0 8px;
  display: grid; gap: 12px;
}
.lp-page-v2 .bk-trust-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  font: 600 15px/1.45 var(--bk-font-body);
  color: var(--bk-text-heading);
}
.lp-page-v2 .bk-trust-list__mark {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(49,228,139,0.15); color: #0E9F5D;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.lp-page-v2 .bk-trust-closer {
  margin: 18px 0 26px;
  font: 400 15px/1.55 var(--bk-font-body);
  color: var(--bk-text-cool);
  max-width: 60ch;
}
.lp-page-v2 .bk-trust-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-page-v2 .bk-trust-verify { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.lp-page-v2 .bk-trust-verify a {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--bk-font-body);
  color: var(--bk-blue);
  text-decoration: underline;
  text-decoration-color: rgba(0,141,243,0.3);
  text-underline-offset: 4px;
}
.lp-page-v2 .bk-trust-visual { position: relative; display: flex; justify-content: center; padding: 8px 0 8px; }
.lp-page-v2 .bk-trust-phone {
  width: clamp(220px, 22vw, 290px);
  border-radius: 34px;
  border: 8px solid #10131B;
  overflow: hidden;
  background: #0B0E14;
  box-shadow: 0 32px 70px rgba(6,26,49,0.35);
}
.lp-page-v2 .bk-trust-phone img { width: 100%; height: auto; }
.lp-page-v2 .bk-float-stat {
  position: absolute; right: clamp(0px, 2vw, 24px); bottom: 40px;
  background: var(--bk-darkblue);
  color: #fff;
  border-radius: var(--bk-radius-card);
  padding: 18px 24px;
  box-shadow: 0 20px 48px rgba(6,26,49,0.35);
}
.lp-page-v2 .bk-float-stat__num { font-family: var(--bk-font-display); font-size: 34px; line-height: 1; margin-bottom: 4px; }
.lp-page-v2 .bk-float-stat__num span {
  background: var(--bk-gradient-title-vert);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-page-v2 .bk-float-stat__lbl { font: 600 11px/1.3 var(--bk-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--bk-cyan-body); }
@media (max-width: 1080px) {
  .lp-page-v2 .bk-trust-card { grid-template-columns: 1fr; }
  .lp-page-v2 .bk-float-stat { right: 8%; }
}

/* ============ HOW IT WORKS ============
   Cards are subgridded onto four shared rows (title / body / visual / quote)
   so the internal blocks line up horizontally across all three cards
   (Matt's request July 20). Micro-visual boxes share the same row height. */
.lp-page-v2 .bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1020px) { .lp-page-v2 .bk-steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.lp-page-v2 .bk-step {
  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: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
}
@supports not (grid-template-rows: subgrid) {
  .lp-page-v2 .bk-step { display: flex; flex-direction: column; }
  .lp-page-v2 .bk-step__quote { margin-top: auto; }
}
.lp-page-v2 .bk-step__title { font-family: var(--bk-font-display); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--bk-text-heading); margin: 0 0 12px; }
.lp-page-v2 .bk-step__body { font: 400 15px/1.6 var(--bk-font-body); color: var(--bk-text-cool); margin: 0 0 24px; text-wrap: pretty; }
.lp-page-v2 .bk-step__visual {
  background: var(--bk-bg-zebra);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card);
  padding: 18px;
  margin-bottom: 20px;
  display: flex; flex-direction: column; justify-content: center;
}
.lp-page-v2 .bk-step__quote {
  padding-top: 16px;
  border-top: 1px dashed var(--bk-border);
  font: italic 400 13.5px/1.5 var(--bk-font-body);
  color: var(--bk-text-muted);
}
.lp-page-v2 .bk-step__quote-name {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font: 600 12px/1 var(--bk-font-body); font-style: normal;
  color: var(--bk-text-heading);
}
.lp-page-v2 .bk-step__quote-name .when { color: var(--bk-text-meta-dark); font-weight: 500; }
/* Step micro-visuals */
/* Product chips: solid tinted tags, 6px corners. Matt's pick (Option B)
   from component-alternatives-board.html, July 20, 2026. */
.lp-page-v2 .bk-mini-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-page-v2 .bk-mini-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 600 13px/1 var(--bk-font-body);
  color: var(--bk-text-heading);
  background: rgba(0,141,243,0.07);
  padding: 8px 11px; border-radius: 6px;
}
.lp-page-v2 .bk-mini-chip b { color: var(--bk-blue); font-weight: 700; }
.lp-page-v2 .bk-mini-check { display: grid; gap: 10px; }
.lp-page-v2 .bk-mini-check__row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.lp-page-v2 .bk-mini-check__mark {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(49,228,139,0.15); color: #0E9F5D;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.lp-page-v2 .bk-mini-check__t { font: 600 13.5px/1.3 var(--bk-font-body); color: var(--bk-text-heading); }
.lp-page-v2 .bk-mini-check__d { font: 400 12.5px/1.4 var(--bk-font-body); color: var(--bk-text-muted); }
.lp-page-v2 .bk-mini-split__lbl { display: flex; justify-content: space-between; font: 600 12px/1 var(--bk-font-body); color: var(--bk-text-muted); margin-bottom: 8px; }
.lp-page-v2 .bk-mini-split__bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bk-border-input); }
.lp-page-v2 .bk-mini-split__you {
  width: 80%;
  background: var(--bk-gradient-cta-desktop);
  color: #fff; font: 700 13px/1 var(--bk-font-body);
  display: flex; align-items: center; justify-content: center;
}
.lp-page-v2 .bk-mini-split__firm { width: 20%; background: #E8EDF6; color: var(--bk-text-muted); font: 600 12px/1 var(--bk-font-body); display: flex; align-items: center; justify-content: center; }
.lp-page-v2 .bk-mini-split__note { margin-top: 8px; font: 500 12px/1.4 var(--bk-font-body); color: var(--bk-text-muted); }

/* ============ PRICING ============ */
.lp-page-v2 .bk-size-toolbar__wrap { text-align: center; margin-bottom: 40px; }
.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);
}
.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);
}
@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-grid { display: grid; grid-template-columns: repeat(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; } }
.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, opacity .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.is-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: 700 11px/1 var(--bk-font-body);
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; 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; font-variant-numeric: tabular-nums; }
.lp-page-v2 .bk-price--feat .bk-price__amount { color: var(--bk-cyan); }
.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);
}

/* ============ 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: 700 13px/1.3 var(--bk-font-body);
  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;
}
@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); }
}
.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: 700 11px/1 var(--bk-font-body);
  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);
}
.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 12px/1 var(--bk-font-body);
  background: #ECF0F8; color: var(--bk-text-cool);
}
.lp-page-v2 .bk-lb__rank--1 { background: var(--bk-star-gold); 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-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;
}
@media (max-width: 640px) {
  .lp-page-v2 .bk-lb thead th, .lp-page-v2 .bk-lb tbody td { padding-left: 16px; padding-right: 16px; }
}
.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; } }
.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: 700 14px/1.2 var(--bk-font-body);
  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; }

/* Leaderboard dark treatment: Option C, frameless table on the section
   (Matt's pick, July 20, 2026, from leaderboard-dark-options.html).
   Additive overrides on the base .bk-lb block above, keyed on modifier
   classes so the base component keeps shipping unchanged on light LPs.
   No card: the table sits directly on #061A31, hairline rgba dividers and
   type hierarchy carry the structure, constrained to a 980px measure.
   The top-earner row highlight is deliberately dropped; the gold medal and
   the largest figure carry rank one.
   Contrast (WCAG, checked): ice body text #EAECF0 on #061A31 14+:1,
   earned figures #7ECFFD 10.3:1, header labels #A5DEFD 12.2:1,
   meta #ABB8D8 8.9:1. */
.lp-page-v2 .bk-lb--open {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  max-width: 980px;
  margin: 0 auto;
}
.lp-page-v2 .bk-lb--open .bk-lb__head {
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.lp-page-v2 .bk-lb--open .bk-lb__title { color: #fff; }
.lp-page-v2 .bk-lb--open .bk-lb__link { color: var(--bk-cyan); }
.lp-page-v2 .bk-lb--open thead { background: transparent; }
.lp-page-v2 .bk-lb--open thead th {
  padding: 22px 16px 12px;
  color: var(--bk-cyan-body);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.lp-page-v2 .bk-lb--open tbody td {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 16px;
  color: var(--bk-text-ice);
}
.lp-page-v2 .bk-lb--open thead th:first-child,
.lp-page-v2 .bk-lb--open tbody td:first-child { padding-left: 0; }
.lp-page-v2 .bk-lb--open thead th:last-child,
.lp-page-v2 .bk-lb--open tbody td:last-child { padding-right: 0; }
.lp-page-v2 .bk-lb--open tbody td b { color: #fff; }
.lp-page-v2 .bk-lb--open tbody tr:first-child td { background: transparent; }
.lp-page-v2 .bk-lb--open tbody tr:last-child td { border-bottom: 1px solid rgba(255,255,255,0.10); }
.lp-page-v2 .bk-lb--open .bk-lb__rank { background: transparent; border: 1px solid rgba(255,255,255,0.22); color: var(--bk-text-ice); }
.lp-page-v2 .bk-lb--open .bk-lb__rank--1 { background: var(--bk-star-gold); border-color: var(--bk-star-gold); color: #5A3D00; }
.lp-page-v2 .bk-lb--open .bk-lb__rank--2 { background: #C8CCD4; border-color: #C8CCD4; color: #2C3038; }
.lp-page-v2 .bk-lb--open .bk-lb__rank--3 { background: #CD8B5E; border-color: #CD8B5E; color: #3A1D08; }
.lp-page-v2 .bk-lb--open .bk-lb__earn { color: var(--bk-cyan); font-size: 17px; }
.lp-page-v2 .bk-lb--open .bk-lb__last { color: var(--bk-text-meta); }
/* Note: no white-space nowrap on the date column. At 390px the nowrap
   pushes the table past the .bk-in container and the page-level
   overflow-x clip hides the spill; the two-line date wrap is the base
   component's existing mobile behavior and is the safe rendering. */
.lp-page-v2 .bk-lb--open .bk-lb__disc {
  padding: 18px 0 0;
  background: transparent;
  border-top: 0;
  color: var(--bk-text-meta);
}
/* Mobile: tighten cell gutters so the table's min-content width fits the
   342px container at 390px viewports. Without this the tracked uppercase
   headers push the table about 8px past its box into the page gutter
   (the page-level overflow-x clip keeps scrollWidth at 390, so document
   width checks alone never catch it). */
@media (max-width: 640px) {
  .lp-page-v2 .bk-lb--open thead th,
  .lp-page-v2 .bk-lb--open tbody td { padding-left: 10px; padding-right: 10px; }
  .lp-page-v2 .bk-lb--open thead th:first-child,
  .lp-page-v2 .bk-lb--open tbody td:first-child { padding-left: 0; }
  .lp-page-v2 .bk-lb--open thead th:last-child,
  .lp-page-v2 .bk-lb--open tbody td:last-child { padding-right: 0; }
  /* Relax header tracking at phone widths: the 2px tracking is what
     inflates the column minimums, and at min-content the date column
     ends up one pixel too narrow for "Jun 2026" (it wraps while
     "Jul 2026" fits). With 1px tracking the single-line date fits
     with real slack, so it can be pinned. */
  .lp-page-v2 .bk-lb--open thead th { letter-spacing: 1px; }
  .lp-page-v2 .bk-lb--open .bk-lb__last { white-space: nowrap; }
}

/* Frameless CTA cards: hairline outlines on the section, no fill. */
.lp-page-v2 .bk-lb-cards--open { max-width: 980px; margin-left: auto; margin-right: auto; margin-top: 40px; }
.lp-page-v2 .bk-lb-cards--open .bk-lb-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}
.lp-page-v2 .bk-lb-cards--open .bk-lb-card__icon { background: transparent; border: 1px solid rgba(255,255,255,0.14); color: var(--bk-cyan); }
.lp-page-v2 .bk-lb-cards--open .bk-lb-card__t { color: #fff; }
.lp-page-v2 .bk-lb-cards--open .bk-lb-card__d { color: var(--bk-text-meta); }

/* ============ MOBILE APP ============ */
.lp-page-v2 .bk-app { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (max-width: 1020px) { .lp-page-v2 .bk-app { grid-template-columns: 1fr; } }
.lp-page-v2 .bk-app .bk-h2 { text-align: left; }
.lp-page-v2 .bk-app__sub { font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--bk-text-cool); margin: 0 0 32px; max-width: 52ch; text-wrap: pretty; }
.lp-page-v2 .bk-app__badges { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-page-v2 .bk-app__badges a { display: inline-block; transition: transform .2s ease; }
.lp-page-v2 .bk-app__badges a:hover { transform: translateY(-2px); }
.lp-page-v2 .bk-app__phones { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.lp-page-v2 .bk-app-phone {
  width: clamp(200px, 19vw, 258px);
  border-radius: 32px;
  border: 8px solid #10131B;
  overflow: hidden;
  background: #0B0E14;
  box-shadow: 0 32px 70px rgba(6,26,49,0.30);
}
.lp-page-v2 .bk-app-phone img { width: 100%; height: auto; }
.lp-page-v2 .bk-app-phone--back { transform: translateX(28px) translateY(24px) scale(.94); z-index: 0; }
.lp-page-v2 .bk-app-phone--front { transform: translateX(-28px); z-index: 1; }

/* ============ FAQ ============ */
.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;
}
@media (max-width: 880px) { .lp-page-v2 .bk-faq { grid-template-columns: 1fr; } }
.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-weight: 400;
  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; }
.lp-page-v2 .bk-support {
  max-width: var(--bk-in-short);
  margin: 40px auto 0;
  background: var(--bk-darkblue);
  color: #fff;
  border-radius: var(--bk-radius-card-lg);
  padding: 32px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.lp-page-v2 .bk-support__t { font-family: var(--bk-font-display); font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
.lp-page-v2 .bk-support__d { font: 400 15px/1.5 var(--bk-font-body); color: var(--bk-cyan-body); margin: 0; }

/* ============ TESTIMONIALS ============ */
/* TP summary: small stat blocks. Matt's pick (Option C) from
   component-alternatives-board.html, July 20, 2026. Stated score stays 4.7
   per proof.md B3; no star glyph row in this treatment. */
.lp-page-v2 .bk-tp-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 0 48px;
}
.lp-page-v2 .bk-tp-stat {
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}
.lp-page-v2 .bk-tp-stat__big {
  font-family: var(--bk-font-display);
  font-size: 19px; line-height: 1.1;
  color: var(--bk-text-heading);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.lp-page-v2 .bk-tp-stat__lbl {
  font: 600 10.5px/1.3 var(--bk-font-body);
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--bk-text-meta-dark);
  margin-top: 4px;
}
.lp-page-v2 .bk-quotes-wrap { position: relative; }
.lp-page-v2 .bk-quotes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.lp-page-v2 .bk-quotes::-webkit-scrollbar { display: none; }
@media (max-width: 1080px) { .lp-page-v2 .bk-quotes { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 680px)  { .lp-page-v2 .bk-quotes { grid-auto-columns: 100%; } }
.lp-page-v2 .bk-quote {
  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;
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-page-v2 .bk-quote:hover { transform: translateY(-4px); box-shadow: var(--bk-shadow-testimonial-hover); }
.lp-page-v2 .bk-quote__stars { color: var(--bk-tp-green); letter-spacing: 2px; font-size: 16px; margin-bottom: 16px; }
.lp-page-v2 .bk-quote__body { font: 400 15px/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; }
.lp-page-v2 .bk-quotes-nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.lp-page-v2 .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 .bk-quotes-nav button:hover { border-color: var(--bk-blue); transform: translateY(-2px); }

/* ============ DISCLOSURES ============
   On the light background directly below the testimonials, like the live
   homepage (Matt's request July 20). Small but legible italic type; the
   legal text itself is verbatim and untouched. The real global footer
   (dark) follows it. */
.lp-page-v2 .bk-disclosures {
  background: #fff;
  color: var(--bk-text-muted);
  padding: 56px 0 64px;
  border-top: 1px solid var(--bk-border);
}
.lp-page-v2 .bk-disclosures__in { max-width: var(--bk-in-short); margin: 0 auto; padding: 0 24px; }
.lp-page-v2 .bk-disclosures h2 {
  font: italic 600 15px/1.45 var(--bk-font-body);
  color: var(--bk-text-cool);
  margin: 0 0 18px;
}
.lp-page-v2 .bk-disclosures p {
  font: italic 400 13.5px/1.65 var(--bk-font-body);
  color: var(--bk-text-muted);
  margin: 0 0 14px;
}
.lp-page-v2 .bk-disclosures p:last-child { margin-bottom: 0; }

/* ============================================================
   MOBILE ADAPTATION (July 20, 2026, Matt's picks from
   mobile-adaptation-board.html). Every rule below sits inside a
   max-width media query except the two base rules for the new
   hero mobile image, so desktop and tablet rendering is unchanged
   by construction. Prototyped in mobile-adaptation-2026-07-20/.
   ============================================================ */

/* Hero rising panel ships as a single picture element (one asset per
   viewport); the source media attribute does the swap. */

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

/* ---- Hero (r2-c mobile treatment) + compact proof row ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-hero { padding: calc(72px + 44px) 0 0; }
  .lp-page-v2 .bk-hero__title { font-size: 34px; letter-spacing: -0.8px; }
  .lp-page-v2 .bk-hero__sub { font-size: 15px; margin-bottom: 24px; }
  .lp-page-v2 .bk-hero__cta .bk-btn { width: 100%; max-width: 420px; padding: 16px 24px; }
  /* Rising panel: funded app home screen, device status bar cropped
     by the negative offset; same glass cut-off language as desktop.
     The picture source swaps the asset; this crops the status bar. */
  .lp-page-v2 .bkrc-window { height: 250px; margin-top: 30px; }
  .lp-page-v2 .bkrc-shot img { margin-top: -48px; }
  /* Proof row: two stats side by side, Trustpilot unit spans below. */
  .lp-page-v2 .bk-proofrow__in { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 24px; }
  .lp-page-v2 .bk-proofrow__item + .bk-proofrow__item { border-left: 0; border-top: 0; padding-top: 0; }
  .lp-page-v2 .bk-proofrow__item:nth-child(2) { border-left: 1px solid rgba(255,255,255,0.10); }
  .lp-page-v2 .bk-proofrow__item:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 16px;
  }
  .lp-page-v2 .bk-proofrow__num { font-size: 26px; }
  .lp-page-v2 .bk-proofrow__lbl { font-size: 10.5px; letter-spacing: 1.5px; }
}

/* ---- Transparency + payouts: de-carded, phone hidden (Matt's pick),
        the $50M+ stat stays as a static block ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-trust-card {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    gap: 32px;
  }
  .lp-page-v2 .bk-trust-leadin { margin-top: 22px; }
  .lp-page-v2 .bk-trust-list { margin: 12px 0 6px; gap: 10px; }
  .lp-page-v2 .bk-trust-list li { font-size: 14px; }
  .lp-page-v2 .bk-trust-closer { margin: 14px 0 22px; }
  .lp-page-v2 .bk-trust-actions { gap: 16px; }
  .lp-page-v2 .bk-trust-actions .bk-btn { width: 100%; }
  .lp-page-v2 .bk-trust-verify { width: 100%; justify-content: space-between; gap: 12px; }
  .lp-page-v2 .bk-trust-verify a { min-height: 44px; align-items: center; }
  .lp-page-v2 .bk-trust-visual { flex-direction: column; align-items: center; padding: 0; }
  .lp-page-v2 .bk-trust-phone { display: none; }
  .lp-page-v2 .bk-float-stat {
    position: static;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 28px;
  }
}

/* ---- How it works: same stack, tighter internals ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-step { padding: 24px 20px; }
  .lp-page-v2 .bk-step__title { font-size: 21px; }
  .lp-page-v2 .bk-step__body { font-size: 14.5px; margin-bottom: 18px; }
  .lp-page-v2 .bk-step__visual { padding: 14px; }
  .lp-page-v2 .bk-step__quote { font-size: 13px; }
}

/* ---- Pricing: swipe carousel with next-card peek, Pro first
        (Matt picked Proposed A) ---- */
@media (max-width: 640px) {
  .lp-page-v2 .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 .bk-price-grid::-webkit-scrollbar { display: none; }
  .lp-page-v2 .bk-price { scroll-snap-align: start; padding: 26px 22px; }
  .lp-page-v2 .bk-price:hover { transform: none; }
  .lp-page-v2 .bk-price__amount { font-size: 46px; }
  .lp-page-v2 #price-pro { order: -1; }
}

/* ---- Leaderboard: table becomes a rank list. No data dropped; the
        header row stays for screen readers. ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-lb--open thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lp-page-v2 .bk-lb--open table,
  .lp-page-v2 .bk-lb--open tbody { display: block; width: 100%; }
  .lp-page-v2 .bk-lb--open 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 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .lp-page-v2 .bk-lb--open tbody td { display: block; padding: 0; border: 0; }
  .lp-page-v2 .bk-lb--open tbody td:nth-child(1) { grid-row: 1 / 3; }
  .lp-page-v2 .bk-lb--open tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 16px; }
  .lp-page-v2 .bk-lb--open tbody td:nth-child(3) {
    grid-column: 3; grid-row: 1 / 3;
    text-align: right;
    font-size: 18px;
  }
  .lp-page-v2 .bk-lb--open tbody td:nth-child(4) {
    grid-column: 2; grid-row: 2;
    text-align: left;
    font-size: 12px;
  }
  .lp-page-v2 .bk-lb--open tbody td:nth-child(4)::before { content: "Last payout "; }
  .lp-page-v2 .bk-lb--open tbody tr:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
  .lp-page-v2 .bk-lb--open tbody tr:last-child td { border-bottom: 0; }
  .lp-page-v2 .bk-lb--open .bk-lb__rank { width: 30px; height: 30px; }
  .lp-page-v2 .bk-lb-cards--open { margin-top: 28px; gap: 14px; }
  .lp-page-v2 .bk-lb-card { grid-template-columns: 44px 1fr; gap: 12px 14px; padding: 20px; }
  .lp-page-v2 .bk-lb-card__icon { width: 44px; height: 44px; border-radius: 12px; }
  .lp-page-v2 .bk-lb-card > a.bk-btn { grid-column: 1 / -1; width: 100%; }
}

/* ---- Mobile app: one decisive phone (the two-device pair totals
        428px in a 342px container and clips) ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-app { gap: 32px; }
  .lp-page-v2 .bk-app-phone--back { display: none; }
  .lp-page-v2 .bk-app-phone--front { transform: none; width: min(60vw, 240px); }
  .lp-page-v2 .bk-app__sub { font-size: 16.5px; margin-bottom: 24px; }
}

/* ---- FAQ: accordion on phones (first item open, JS in the page
        script keeps every item open at 641px and up) ---- */
@media (max-width: 640px) {
  .lp-page-v2 .bk-faq { gap: 12px; margin-top: 28px; }
  .lp-page-v2 .bk-faq__item { padding: 4px 18px; }
  .lp-page-v2 .bk-faq__sum {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 10px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lp-page-v2 .bk-faq__sum::-webkit-details-marker { display: none; }
  .lp-page-v2 .bk-faq__q { font-size: 17.5px; margin: 0; }
  .lp-page-v2 .bk-faq__chev {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid #6A7695;
    border-bottom: 2px solid #6A7695;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
  }
  .lp-page-v2 details[open] .bk-faq__chev { transform: rotate(225deg) translateY(-2px); }
  .lp-page-v2 .bk-faq__a { padding: 0 0 16px; font-size: 14.5px; }
  .lp-page-v2 .bk-support { padding: 24px 20px; }
  .lp-page-v2 .bk-support .bk-btn { width: 100%; }
}
@media (min-width: 641px) {
  /* Desktop and tablet: FAQ cards stay static and always open. */
  .lp-page-v2 .bk-faq__sum { pointer-events: none; list-style: none; }
  .lp-page-v2 .bk-faq__sum::-webkit-details-marker { display: none; }
  .lp-page-v2 .bk-faq__chev { display: none; }
}

/* ---- Testimonials: edge bleed plus next-card peek ---- */
@media (max-width: 680px) {
  .lp-page-v2 .bk-quotes {
    grid-auto-columns: 88%;
    margin: 0 -24px;
    padding: 0 24px 8px;
    scroll-padding-left: 24px;
  }
  .lp-page-v2 .bk-quote { padding: 24px 22px; }
}

/* ---- Sticky bottom CTA: OFF by default (Matt, July 20). Inert unless
        <body> carries the m-sticky class; Stage 2 exposes that as a
        WordPress option (ACF site toggle adds the class) so it can be
        switched on without a deploy. ---- */
.bk-sticky-cta { display: none; }
@media (max-width: 640px) {
  body.m-sticky .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 .bk-sticky-cta.is-on { transform: translateY(0); }
  body.m-sticky .bk-sticky-cta.is-off { transform: translateY(105%); }
  .bk-sticky-cta .bk-btn { width: 100%; padding: 14px 20px; font-size: 16px; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page-v2 .bk-hero { animation: none; }
  .lp-page-v2 .bk-lb__live { animation: none; }
  .lp-page-v2 * { transition-duration: 0.01ms !important; }
  .bk-sticky-cta { transition: none !important; }
  html { scroll-behavior: auto; }
}