/* /css/pages/buy-youtube-views-ads.css — the promo-primary /buy-youtube-views.
 *
 * Composes the foundation landing kit (ink surfaces, fnd-display, fnd-sec,
 * fnd-stats, fnd-stepgrid, fnd-faq) exactly like the homepage and free-page
 * rebuilds, and adds the page-own CRAFT this product needs: the two-column hero,
 * the demonstration of the video running as a YouTube ad, and the YouTube Studio
 * traffic-source proof.
 *
 * The ad card and the Studio card imitate YouTube's own chrome. They are
 * DELIBERATELY page-own and never promoted to the system: a device that copies a
 * third party's interface must not become a thing other pages reach for by habit
 * (same rule ads.css states for its ad-slot preview).
 */

/* ==== HERO — two columns, copy left, demonstration right ==================== */
.byva-hero__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); align-items: center; }
@media (min-width: 940px) { .byva-hero__in { grid-template-columns: 1.12fr .88fr; gap: var(--fnd-s8); } }

.byva-hero__copy .fnd-chip { margin-bottom: var(--fnd-s4); }
.byva-hero__title {
  font-size: var(--fnd-t-display-2);
  font-family: var(--fnd-display-font);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  margin: 0 0 var(--fnd-s4);
  max-width: 18ch;
}
/* One accent word, drawn as a background so it repaints correctly on any wrap
   (the homepage learned this the hard way; see home-v2.css). */
.byva-hero__title em {
  font-style: normal;
  background-image: linear-gradient(var(--fnd-accent), var(--fnd-accent));
  background-size: 100% .11em;
  background-position: 0 92%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .04em;
}
.byva-hero__sub {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.6;
  color: var(--fnd-on-ink-soft);
  max-width: 46ch;
  margin: 0 0 var(--fnd-s6);
}
.byva-hero__go { display: flex; flex-direction: column; align-items: flex-start; }
.byva-hero__hint { font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); margin: var(--fnd-s4) 0 0; max-width: 44ch; line-height: 1.55; }

/* ==== THE DEMONSTRATION: the video running as a YouTube ad ================== */
.byva-stage { min-width: 0; }
.byva-demo {
  margin: 0;
  background: #1D1A25;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--fnd-r);
  padding: var(--fnd-s5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.byva-demo__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); margin-bottom: var(--fnd-s4); }
.byva-demo__label i { color: #ff4e45; }

.byva-adcard__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.byva-adcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.byva-adcard__dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.82); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
.byva-adcard__ad { position: absolute; left: 8px; top: 8px; background: #ffd21e; color: #1a1400; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: .01em; }
.byva-adcard__meta { display: flex; gap: 11px; align-items: flex-start; margin-top: var(--fnd-s3); }
.byva-adcard__av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, #3A3450, #2A2438); border: 1px solid var(--fnd-on-ink-rule); }
.byva-adcard__t { margin: 0 0 2px; font-family: var(--fnd-display-font); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.3; }
.byva-adcard__ch { margin: 0; font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); }

/* The little Studio proof strip inside the demo card. Named -adproof, NOT
   -proof, because the proof BAND section below also uses .byva-proof and the two
   collided: the strip's margin/padding/border-top leaked onto the band and
   opened a gap between the hero and the band. */
.byva-adproof { margin-top: var(--fnd-s4); padding-top: var(--fnd-s4); border-top: 1px solid var(--fnd-on-ink-rule); }
.byva-adproof__h { margin: 0 0 var(--fnd-s3); font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); }
.byva-adproof__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.byva-adproof__row:last-child { margin-bottom: 0; }
.byva-adproof__src { font-size: 12.5px; color: rgba(255,255,255,.9); white-space: nowrap; }
.byva-adproof__row--muted .byva-adproof__src { color: var(--fnd-on-ink-faint); }
.byva-adproof__bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.byva-adproof__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--fnd-accent); }
.byva-adproof__row--muted .byva-adproof__bar > span { background: rgba(255,255,255,.28); }
.byva-adproof__pct { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.byva-adproof__row--muted .byva-adproof__pct { color: var(--fnd-on-ink-faint); font-weight: 600; }

.byva-stage__cap { font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); margin: var(--fnd-s3) 0 0; line-height: 1.55; max-width: 42ch; }

/* ==== HOW IT WORKS v2 (admin preview) — each step shows itself with a small
   on-brand mock (paste field, budget tiles, Studio bars). Cards so the title is a
   real card title; the mocks are page-own like .byva-studio and never promoted. */
.byva-how2 { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); }
@media (min-width: 760px) { .byva-how2 { grid-template-columns: repeat(3, 1fr); } }
.byva-how2__card .fnd-card-body { display: flex; flex-direction: column; gap: var(--fnd-s4); height: 100%; }
/* One fixed height across all three so the titles below start on the same line
   (the Studio-bars mock is naturally taller than the field and the tiles). */
.byva-how2__viz {
  background: var(--fnd-paper); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-sm);
  padding: var(--fnd-s4); min-height: 116px; display: flex; align-items: center; gap: 8px;
}
/* Step 1: the paste field */
.byva-how2__field {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--fnd-card); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-xs);
  padding: 9px 11px; font-size: var(--fnd-t-micro); color: var(--fnd-text-faint);
}
.byva-how2__field .fa-youtube { color: #ff4e45; flex: 0 0 auto; }
.byva-how2__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byva-how2__ok { color: #128a4b; flex: 0 0 auto; }
/* Step 2: the budget tiles */
.byva-how2__chip {
  flex: 1 1 auto; text-align: center; padding: 9px 4px;
  border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-xs); background: var(--fnd-card);
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft);
}
.byva-how2__chip--on { border-color: var(--fnd-accent); box-shadow: inset 0 0 0 1px var(--fnd-accent); color: var(--fnd-text); }
/* Step 3: the Studio bars */
.byva-how2__viz--grow { flex-direction: column; align-items: stretch; gap: 9px; }
.byva-how2__barrow { display: grid; grid-template-columns: 1fr; gap: 4px; }
.byva-how2__barlabel { font-size: var(--fnd-t-micro); color: var(--fnd-text-faint); }
.byva-how2__bar { height: 8px; border-radius: 999px; background: var(--fnd-rule); overflow: hidden; }
.byva-how2__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--fnd-accent); }
.byva-how2__barrow--q .byva-how2__bar > span { background: var(--fnd-text-faint); opacity: .55; }
/* The numbered title row. Reserve two lines and top-align so a title that wraps
   (step 3) does not push its description below the others. */
.byva-how2__head { display: flex; align-items: flex-start; gap: var(--fnd-s3); min-height: 47px; }
.byva-how2__n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fnd-ink); color: var(--fnd-on-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fnd-display-font); font-weight: 800; font-size: var(--fnd-t-meta);
}
.byva-how2__card .fnd-card-t { margin: 0; }
.byva-how2__card .fnd-card-sub { margin: 0; }

/* ==== PROOF BAND — one dominant true figure + a narrative ==================
   Mirrors the homepage proof device (home-v2 .hv-proof): the figure carries the
   section, the words explain it. A page-own layout for now; if a third page
   needs it, promote a shared .fnd-proof to foundation-devices.css. */
.byva-proof__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); }
@media (min-width: 860px) { .byva-proof__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: center; } }
.byva-proof__stat { margin: 0; }
/* Looser than the homepage's -.05em/.86: at that tightness a comma-grouped
   number reads as one squished block. -.02em keeps it a display figure while
   letting the digits breathe, and the label gets real air below it. */
.byva-proof__fig { display: block; font-family: var(--fnd-display-font); font-weight: 800; font-size: clamp(3.1rem, 9.5vw, 5.4rem); line-height: .96; letter-spacing: -.02em; color: var(--fnd-text); font-variant-numeric: tabular-nums; }
/* letter-spacing:normal is load-bearing: the label sits inside the .byva-proof__stat
   heading, which carries a tight display tracking, and the span inherited it
   (~-0.84px), jamming the words together. This is body copy and takes body tracking. */
.byva-proof__label { display: block; font-family: var(--fnd-body-font); font-weight: 500; font-size: var(--fnd-t-lede); letter-spacing: normal; color: var(--fnd-text-soft); margin: var(--fnd-s4) 0 0; max-width: 26ch; line-height: 1.45; }
.byva-proof__side .fnd-lede { margin: 0 0 var(--fnd-s3); }
.byva-proof__side .fnd-note { margin: 0; }

/* ==== Centered section headers (chip, heading, lede) ======================= */
.byva-head { text-align: center; max-width: 760px; margin: 0 auto var(--fnd-s6); }
.byva-head .fnd-chip { margin-bottom: var(--fnd-s3); }
/* auto left/right so the heading's own max-width box centres in the header;
   text-align:center only centres the lines inside it, not the box itself. */
.byva-head .fnd-h2 { margin: 0 auto var(--fnd-s3); }
.byva-head .fnd-lede { margin: 0 auto; max-width: 620px; }

/* ==== THE CHECKOUT — a real order panel, not a bare form =================== */
.byva-buy { max-width: 600px; margin: 0 auto; background: var(--fnd-card); border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r); padding: var(--fnd-s6); box-shadow: 0 18px 44px rgba(22, 20, 26, .09); }
@media (min-width: 720px) { .byva-buy { padding: var(--fnd-s7); } }
.byva-buy > .fnd-field,
.byva-buy > .byva-picker,
.byva-buy > .promo-split,
.byva-buy > .promo-chosen { margin-bottom: var(--fnd-s5); }
/* Each numbered label leads with the step number in the accent, so the three
   steps read as a guided flow rather than three unrelated fields. */
/* The three steps are the spine of the form, so their labels read a rung above a
   plain field label: larger display type with the step number in the accent. */
.byva-buy .fnd-label { display: block; margin-bottom: var(--fnd-s3); font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-h4, 18px); letter-spacing: -.01em; }
.byva-stepn { color: var(--fnd-accent-deep); }
.byva-picker .fnd-label { margin-bottom: var(--fnd-s3); }
.byva-picker .promo-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 460px) { .byva-picker .promo-packs { grid-template-columns: minmax(0, 1fr); } }
/* The budget tiles are wells cut into the white checkout panel (the system's
   in-card treatment; .byva-buy looks like a card but is not the class, so the
   ground is set here). Unselected = a recessed field-bg well; selected lifts to
   the card colour with the indigo accent ring, softer and more on-brand than the
   default ink ring. The selectors match the foundation's own specificity and win
   on load order. */
.byva-buy .fnd-choice { background: var(--fnd-field-bg); padding: var(--fnd-s5); padding-right: calc(var(--fnd-s5) + 22px); }
.byva-buy .fnd-choices > .fnd-choice:has(input:checked) { background: var(--fnd-card); border-color: var(--fnd-accent); box-shadow: inset 0 0 0 2px var(--fnd-accent); }
/* Radio to the top-right corner so the price and estimate use the tile's full
   width the way a premium pricing card reads, instead of sitting indented past a
   left-hand radio with an empty column beneath it. */
.byva-buy .fnd-choice > input[type="radio"] { position: absolute; top: var(--fnd-s4); right: var(--fnd-s4); margin: 0; }
.byva-buy .fnd-choice .fnd-choice-t { font-size: var(--fnd-t-h3-lg); }
.byva-est { color: var(--fnd-text-soft); font-weight: 600; display: block; margin-bottom: 2px; }
/* Two-tier tile description: the view estimate leads in full ink, the run length
   sits quiet beneath it, instead of both facts run together on one muted line. */
.byva-picker .fnd-choice-lead { display: block; color: var(--fnd-text); font-weight: 600; text-wrap: balance; }
.byva-picker .fnd-choice-sub  { display: block; margin-top: 3px; color: var(--fnd-text-soft); }
.byva-estnote { margin-top: var(--fnd-s3); }
.promo-custom-toggle .fnd-textbtn { display: inline-flex; align-items: center; min-height: 44px; }
/* The split sits on warm paper inside the white panel, so the receipt reads as
   an inset summary rather than a second white card lost on the first. */
.byva-buy .promo-split { background: var(--fnd-paper); border-color: transparent; box-shadow: none; }
.byva-pay { margin-top: var(--fnd-s3); }
.byva-center { text-align: center; }
#ag-pay-note { text-align: center; margin-top: var(--fnd-s3); }

/* ==== THE STUDIO PROOF SECTION — two columns =============================== */
.byva-verify__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); align-items: center; }
@media (min-width: 940px) { .byva-verify__in { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8); } }
.byva-verify__copy .fnd-chip { margin-bottom: var(--fnd-s3); }
.byva-verify__copy .fnd-h2 { margin: 0 0 var(--fnd-s3); }
.byva-verify__note { font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); margin: var(--fnd-s4) 0 0; line-height: 1.55; }

.byva-studio { background: #1D1A25; border: 1px solid rgba(255,255,255,.17); border-radius: var(--fnd-r); padding: var(--fnd-s6); box-shadow: 0 24px 60px rgba(0,0,0,.34); }
.byva-studio__head { display: flex; align-items: center; gap: 9px; font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); padding-bottom: var(--fnd-s4); margin-bottom: var(--fnd-s5); border-bottom: 1px solid var(--fnd-on-ink-rule); }
.byva-studio__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4e45; flex: 0 0 auto; }
.byva-studio__row { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 12px; margin-bottom: var(--fnd-s4); }
.byva-studio__row:last-child { margin-bottom: 0; }
.byva-studio__src { font-size: 13.5px; color: rgba(255,255,255,.92); }
.byva-studio__bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.byva-studio__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--fnd-accent); }
.byva-studio__bar--q > span { background: rgba(255,255,255,.26); }
.byva-studio__pct { font-size: 14px; font-weight: 700; color: #fff; }
.byva-studio__row:not(:first-of-type) .byva-studio__pct { color: var(--fnd-on-ink-faint); font-weight: 600; }

/* ==== REAL VS BOTS — the views chart (show), then the two columns (tell) ====
   A dark Studio-style analytics frame on paper, same mocked-chrome language as
   the hero ad card and the Studio proof: real ad views climb and hold, bot views
   spike and fall off a cliff. Page-own on purpose (imitates YouTube chrome), never
   promoted to the system, same rule as .byva-studio. */
.byva-chart {
  max-width: 820px; margin: 0 auto var(--fnd-s6);
  background: #1D1A25; border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--fnd-r); padding: var(--fnd-s5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.byva-chart__head {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint);
  padding-bottom: var(--fnd-s4); margin-bottom: var(--fnd-s5);
  border-bottom: 1px solid var(--fnd-on-ink-rule);
}
/* Neutral, NOT the Studio red dot: on this chart red means the bot line, so a red
   header dot read as if the whole card was about the thing to avoid. */
.byva-chart__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .4); flex: 0 0 auto; }
.byva-chart__plot svg { width: 100%; height: auto; display: block; }
/* Phone: give the plot real presence (lines stretch a touch, no text to distort
   since the words are HTML), so the climb-and-hold vs spike-and-cliff reads big. */
@media (max-width: 640px) { .byva-chart__plot svg { height: 150px; } }
.byva-chart__x { display: flex; justify-content: space-between; margin-top: var(--fnd-s2); font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); }
.byva-chart__legend { display: flex; flex-wrap: wrap; gap: var(--fnd-s3) var(--fnd-s6); margin-top: var(--fnd-s5); }
.byva-chart__key { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-soft); }
.byva-chart__swatch { width: 18px; height: 4px; border-radius: 999px; flex: 0 0 auto; }
.byva-chart__key--real .byva-chart__swatch { background: #8F87FF; }
.byva-chart__key--bot .byva-chart__swatch { background: #FF5A4D; }

/* ==== REAL VS BOTS — two columns =========================================== */
.byva-vs { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); max-width: 940px; margin: 0 auto; }
@media (min-width: 760px) { .byva-vs { grid-template-columns: 1fr 1fr; gap: var(--fnd-s6); } }
.byva-vs__col { border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r); padding: var(--fnd-s6); background: var(--fnd-card); display: flex; flex-direction: column; }
.byva-vs__col--us { border-color: var(--fnd-accent); box-shadow: 0 10px 30px rgba(143, 135, 255, .16); }
.byva-vs__col--them { background: transparent; }
.byva-vs__list { flex: 1 1 auto; }
/* The outcome each column leads to, stated once, so the section reads at a
   glance: real views stay, bot views get wiped. */
.byva-vs__out { margin-top: var(--fnd-s5); padding-top: var(--fnd-s4); border-top: 1px solid var(--fnd-rule); font-family: var(--fnd-display-font); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.byva-vs__col--us .byva-vs__out { color: #0f7a42; }
.byva-vs__col--them .byva-vs__out { color: var(--fnd-text-soft); }
.byva-vs__out i { font-size: 17px; }
.byva-vs__h { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--fnd-s4); font-family: var(--fnd-display-font); font-weight: 700; font-size: 16px; }
.byva-vs__col--us .byva-vs__h i { color: #128a4b; }
.byva-vs__col--them .byva-vs__h { color: var(--fnd-text-soft); }
.byva-vs__col--them .byva-vs__h i { color: #b42318; }
.byva-vs__list { list-style: none; margin: 0; padding: 0; }
.byva-vs__list li { position: relative; padding: 0 0 var(--fnd-s3) var(--fnd-s5); font-size: var(--fnd-t-sm); line-height: 1.5; color: var(--fnd-text-soft); }
.byva-vs__list li:last-child { padding-bottom: 0; }
.byva-vs__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; }
.byva-vs__col--us .byva-vs__list li::before { background: #128a4b; }
.byva-vs__col--them .byva-vs__list li::before { background: #d0c7bd; }

/* ==== REAL VS BOTS v2 (admin preview) — the winner card is bright and lifted,
   the bot card is a solid recessed grey that reads "avoid this". The old .byva-vs
   member styles above are untouched; these only apply under .byva-vs--new. ===== */
.byva-vs--new .byva-vs__col { position: relative; }
.byva-vs--new .byva-vs__col--us {
  border-width: 1.5px; border-color: var(--fnd-accent);
  box-shadow: 0 16px 40px rgba(143, 135, 255, .22);
}
/* The bot card: solid, recessed, desaturated. NOT transparent. */
.byva-vs--new .byva-vs__col--them {
  background: #F1EDE9; border-color: var(--fnd-rule); box-shadow: none;
}
/* Header icon in a filled disc so good/bad reads before the words do. */
.byva-vs--new .byva-vs__h { gap: 11px; font-size: var(--fnd-t-h3); }
.byva-vs--new .byva-vs__ic {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
.byva-vs--new .byva-vs__col--us .byva-vs__ic { background: #128a4b; }
.byva-vs--new .byva-vs__col--us .byva-vs__h i,
.byva-vs--new .byva-vs__col--them .byva-vs__h i { color: #fff; }
.byva-vs--new .byva-vs__col--them .byva-vs__ic { background: #B0645C; }
.byva-vs--new .byva-vs__col--them .byva-vs__h { color: var(--fnd-text-faint); }
.byva-vs--new .byva-vs__col--them .byva-vs__list li { color: var(--fnd-text-faint); }
.byva-vs--new .byva-vs__col--them .byva-vs__list li::before { background: #C9BEB4; }
/* Recommended eyebrow above the winner's title. Uses the system .fnd-badge--ok
   pill; this class only lifts it onto its own line above the heading. (A static
   eyebrow, not an absolute corner badge, which collided with the two-line title
   on a phone.) */
.byva-vs--new .byva-vs__tag { margin-bottom: var(--fnd-s3); }
/* Outcome as a filled chip instead of a hairline rule, so each column ends on a
   clear verdict. */
.byva-vs--new .byva-vs__out {
  margin-top: var(--fnd-s5); padding: var(--fnd-s3) var(--fnd-s4);
  border-top: none; border-radius: var(--fnd-r-sm);
}
.byva-vs--new .byva-vs__col--us .byva-vs__out { background: rgba(18, 138, 75, .10); color: #0f7a42; }
.byva-vs--new .byva-vs__col--them .byva-vs__out { background: rgba(180, 35, 24, .07); color: #9A5A52; }

/* ==== FAQ v2 (admin preview) — lead with the four sale-blockers (marked
   answered), long-tail folded under a quiet divider. Narrower column reads
   better than a full-width wall. Members keep .byva-faq__list untouched. ====== */
.byva-faq2 { max-width: 760px; margin: 0 auto; }
.byva-faq2 .fnd-faq { margin: 0; }
.byva-faq2__key { margin-bottom: var(--fnd-s5); }
.byva-faq2__ic { color: #128a4b; flex: 0 0 auto; font-size: 15px; margin-right: 9px; }
.byva-faq2__more {
  margin: var(--fnd-s6) 0 var(--fnd-s4); padding-top: var(--fnd-s5);
  border-top: 1px solid var(--fnd-rule);
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-h3); color: var(--fnd-text);
}

/* ==== Sticky back-to-checkout bar (admin preview) ==========================
   Reuses .fnd-actionbar for the look; this class only pins it to the viewport and
   slides it in once JS adds .is-visible (when the checkout has scrolled past). */
.byva-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  transform: translateY(115%); transition: transform 240ms ease;
}
.byva-buybar.is-visible { transform: translateY(0); }
/* Anchor the content to the page width so on desktop it lines up with the page
   and its button clears the corner language switcher. */
.byva-buybar__in { display: flex; align-items: center; gap: var(--fnd-s4); width: 100%; max-width: 1080px; margin: 0 auto; }
.byva-buybar .byva-buybar__go { flex: 0 0 auto; margin-left: auto; }
/* promote-run.css hides .fnd-actionbar-info everywhere inside .promo-page; bring
   the label back on desktop, where there is room for it beside the button. */
@media (min-width: 641px) { .promo-page .byva-buybar .fnd-actionbar-info { display: block; } }
/* Phone: no room for the label, so the bar is a single full-width button.
   The old 52px right reservation held it clear of the floating language
   switcher in the bottom-right corner; that switcher now lives in the header,
   so the reservation is gone and the button fills the full width. (Founder,
   2026-08-27.) */
@media (max-width: 640px) {
  .byva-buybar .fnd-actionbar-info { display: none; }
  .byva-buybar .byva-buybar__go { width: 100%; margin-left: 0; }
}

/* ==== The shoutout upsell: copy beside its button, stacking on a phone ===== */
.byva-alt__panel { display: flex; align-items: center; justify-content: space-between; gap: var(--fnd-s5); flex-wrap: wrap; }
.byva-alt__copy { flex: 1 1 340px; }
.byva-alt__panel .fnd-h2 { margin: 0 0 var(--fnd-s2); }
.byva-alt__panel .fnd-lede { margin: 0; }
/* Stacking on a phone: reset the copy's flex-basis (in a column it would force
   the copy block to 340px tall and open a dead gap above the button), and let
   the CTA run full width so it reads as the section's action. */
@media (max-width: 640px) {
  .byva-alt__panel { flex-direction: column; align-items: stretch; }
  .byva-alt__copy { flex: 0 0 auto; }
  .byva-alt__panel .fnd-btn { width: 100%; }
}