/* business-pricing page level (loads last). Live has no nav or footer; Danny added both (2026-10-20). The nav is fixed
   at every width (80px bar from 1280, 83px below), so the first section starts below it and keeps its own spacing. */
/* Ways to pay is black (Danny, 2026-10-26): instead of a margin, its top padding grows by the nav height so the black
   also sits under the nav. Section padding: 100 desktop, 80 tablet, 32 phone (10-ways.css). */
.nf-bp-ways { padding-top: 163px; }
@media (min-width: 1280px) { .nf-bp-ways { padding-top: 160px; } }
@media (min-width: 1440px) { .nf-bp-ways { padding-top: 180px; } }
@media (max-width: 809.98px) { .nf-bp-ways { padding-top: 115px; } }

/* "What renting includes" cards read the same way everywhere (Danny, 2026-10-20). Framer gives each card its own wrappers
   with fixed text heights and centring (and pads some titles with empty lines, removed in tools/generators/bp-airguard),
   so equal content sat at different heights. Here: cards in a row share one height, each card stacks icon, title and
   description from the top, and titles in a row share one height (js/50-renting.js) so the descriptions line up. */
.nf-bp-renting [class*="nf-bp-renting__box-"],
.nf-bp-renting [class*="nf-bp-renting__row-"],
.nf-bp-renting [class*="nf-bp-renting__"]:has(> [class*="nf-bp-renting__card-"] h3) { align-items: stretch; }
.nf-bp-renting [class*="nf-bp-renting__card-"] { justify-content: flex-start; height: auto; min-height: 0; }
.nf-bp-renting [class*="nf-bp-renting__card-"] [class*="nf-bp-renting__content-"] { justify-content: flex-start; height: auto; }
.nf-bp-renting [class*="nf-bp-renting__card-"] [class*="nf-bp-renting__text-"] { height: auto; }
.nf-bp-renting [class*="nf-bp-renting__card-"] h3 { height: auto; }

/* Absolute black on this page only (Danny, 2026-10-26): every dark surface that live draws in #1F1D20 (compare table,
   Air Guard cards, "What renting includes", the dark "I know what I need" card) is #000 here, set in each section's
   CSS. The compare table's group rows are a #222 band. */


/* Phone text sizes in line with /business (Danny, 2026-10-26): section titles 28px, leads 18px, body and table text 16px,
   small labels 14px, card names 25px, card titles 18px. The FAQ already matches the business FAQ (26 / 17 / 16). */
@media (max-width: 809.98px) {
  .nf-bp-ways__lead, .nf-bp-two-ways__sub, .nf-bp-compare__lede, .nf-bp-airguard__t6, .nf-bp-renting__t9, .nf-bp-choose__sub {
    font-size: 18px; line-height: 1.3; letter-spacing: normal;
  }
  .nf-bp-two-ways__kicker { font-size: 14px; line-height: 1.25; letter-spacing: normal; }
  .nf-bp-two-ways__name { font-size: 25px; }
  .nf-bp-two-ways__text { font-size: 16px; line-height: 1.3; letter-spacing: normal; }
  .nf-bp-two-ways__foot-text { font-size: 16px; }
  .nf-bp-two-ways__icon { width: 20px; height: 20px; }
  .nf-bp-compare__cell { font-size: 16px; }
  .nf-bp-compare__cell--head { font-size: 16px; }
  .nf-bp-compare__group-label, .nf-bp-compare__group-label--lg { font-size: 16px; line-height: 1.2em; }
  .nf-bp-airguard__t7, .nf-bp-renting__t10 { font-size: 18px; line-height: 1.25; }
  .nf-bp-airguard__t8 { font-size: 16px; line-height: 1.3; }
  .nf-bp-renting__t11 { font-size: 15px; line-height: 1.3; }
  .nf-bp-choose__h { font-size: 22px; }
  .nf-bp-choose__body { font-size: 16px; line-height: 1.3; }
}

/* Desktop and tablet text scale (Danny, 2026-10-26), shared with /business "Buy it or rent it" and EcoFlow "Ways to pay":
   desktop  title 52, lead 24, card name 40, small-card title 28, body 20, label 18, link 21
   tablet   title 42, lead 22, card name 32, small-card title 24, body 18, label 16, link 18
   (phone: see the block above). The compare table keeps its own sizes. */
@media (min-width: 810px) {
  .nf-bp-two-ways__kicker { font-size: 18px; line-height: 1.25; letter-spacing: normal; }
  .nf-bp-two-ways__name { font-size: 40px; }
  .nf-bp-two-ways__text { font-size: 20px; line-height: 1.3; letter-spacing: normal; }
  .nf-bp-two-ways__foot-text { font-size: 20px; }
  .nf-bp-airguard [class*="nf-bp-airguard__card-"] h3, .nf-bp-renting [class*="nf-bp-renting__card-"] h3 { font-size: 28px; line-height: 1.25; }
  .nf-bp-airguard [class*="nf-bp-airguard__card-"] p, .nf-bp-renting [class*="nf-bp-renting__card-"] p { font-size: 20px; line-height: 1.3; }
  .nf-bp-choose__h { font-size: 32px; }
  .nf-bp-choose__body { font-size: 20px; line-height: 1.3; }
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-ways__title, .nf-bp-two-ways__title, .nf-bp-compare__title, .nf-bp-choose__title,
  .nf-bp-airguard h2, .nf-bp-renting h2 { font-size: 42px; }
  .nf-bp-ways__lead, .nf-bp-two-ways__sub, .nf-bp-compare__lede, .nf-bp-choose__sub,
  .nf-bp-airguard [class*="nf-bp-airguard__header-"] p, .nf-bp-renting [class*="nf-bp-renting__header-"] p { font-size: 22px; line-height: 1.3; }
  .nf-bp-two-ways__kicker { font-size: 16px; }
  .nf-bp-two-ways__name { font-size: 32px; }
  .nf-bp-two-ways__text, .nf-bp-two-ways__foot-text { font-size: 18px; }
  .nf-bp-airguard [class*="nf-bp-airguard__card-"] h3, .nf-bp-renting [class*="nf-bp-renting__card-"] h3 { font-size: 24px; }
  .nf-bp-airguard [class*="nf-bp-airguard__card-"] p, .nf-bp-renting [class*="nf-bp-renting__card-"] p { font-size: 18px; }
  .nf-bp-choose__h { font-size: 28px; }
  .nf-bp-choose__body { font-size: 18px; }
  .nf-bp-choose__link-text, .nf-bp-choose__alt-text { font-size: 18px; } /* buttons keep 21px like the hero (QC 2026-10-28) */
}

/* "Ready to choose?" cards hug their content (Danny, 2026-10-26, reference screenshot): live fixes the section at 752px and
   the row at 442px (389px for the tablet dark card), so the cards were tall with empty space above the buttons. Now:
   title, text, then the button 24px below; the two cards in a row share one height and their buttons sit at the bottom.
   Text styling (sizes, colours, the "Speak to an expert" arrow) unchanged. */
.nf-bp-choose { height: auto; }
.nf-bp-choose__row { height: auto; align-items: stretch; }
.nf-bp-choose__dark-wrap { height: auto; }
.nf-bp-choose__card { gap: 24px; justify-content: space-between; }
.nf-bp-choose__card--dark, .nf-bp-choose__card--light { height: auto; }
.nf-bp-choose__content, .nf-bp-choose__content--light { flex: 0 0 auto; height: auto; gap: 12px; }
.nf-bp-choose__content--dark { align-items: flex-start; }
.nf-bp-choose__body-box--dark { flex: 0 0 auto; height: auto; }
.nf-bp-choose__ctas { gap: 12px; }
.nf-bp-choose__link { height: auto; padding-top: 0; padding-bottom: 0; }
.nf-bp-choose__link-box { height: auto; }
/* Tablet stacks the cards in a column: the dark card keeps its desktop flex: 1 0 0px, which with the wrap at height auto
   left it 0px tall (text and "Browse Solution" hidden, QC 2026-10-28). Let it take its content height. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-choose__card--dark { flex: 0 0 auto; }
}

/* Section titles in the same Regular 400 as "Common questions" (Danny 2026-10-27; live: Medium 500). Sizes unchanged. */
.nf-bp-ways__title, .nf-bp-two-ways__title, .nf-bp-compare__title, .nf-bp-choose__title,
.nf-bp-airguard h2, .nf-bp-renting h2 {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-weight: 400;
}