/* Affiliate program page (affiliates.php) in the homepage design.
   Loaded after homepage-v9.css and legal-v9.css. The page reuses the legal pages' hero (#legal-hero: navy gradient,
   photo wash, curve), bar behaviour and closing card (section.bp-legal-cta); everything else is styled here.
   ---------------------------------------------------------------------------------------------
   Layout values are the homepage's, measured at 1440px and 390px: Poppins 700 headings (50px desktop / 30px
   phones, -0.02em), 20px leads, 12px caps eyebrows (white pills from 768px up, plain caps on phones), white cards
   (1px #ededed, 16px radius, 0 10px 28px shadow), the coral "Get Published" pill (#fe506c → #fc6a2a), the #f5f7fa
   grey tone and the section waves (see .bp-aff-wave), with the --bp-m-* phone spacing (24px gutter, 32px heading
   → content, 24px card gap).
   Text colours are darker than the homepage's so every text passes WCAG AA (4.5:1) on both tones: the homepage's
   #737373 body is 4.4:1 on #f5f7fa and its #9aa3af eyebrows 2.5:1 on white.
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page {
  --aff-ink: var(--color-text, #1d1d1d);
  --aff-body: #5f6773;        /* 5.7:1 on white, 5.3:1 on #f5f7fa */
  --aff-eyebrow: #4b5563;     /* 7.6:1 on white, 7.0:1 on #f5f7fa */
  --aff-muted: #667085;       /* 5.0:1 on white, 4.6:1 on #f5f7fa */
  --aff-line: #ededed;
  --aff-rule: #eceef2;
  --aff-pill-line: #e5e7eb;
  --aff-grey: #f5f7fa;
  --aff-link: #006fc9;        /* 5.1:1 on white (the homepage's #0287ed is 3.7:1) */
  --aff-link-hover: #00579e;
  --aff-green: #71a986;       /* ticks (icons) */
  --aff-green-strong: #2f7d52; /* step numbers: white text on it is 5.0:1 */
  --aff-green-ink: #23784a;   /* "You earn" amounts */
  --aff-coral: #fe506c;
  --aff-orange: #fc6a2a;
  --aff-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --aff-soft-shadow: 0 25px 70px rgba(0, 0, 0, 0.07);
  --aff-radius: var(--radius-2xl, 1rem);
  --aff-width: min(1140px, calc(100% - 48px));
  --aff-wave-h: 150px;
  --aff-section-top: 6.5rem;
  --aff-section-bottom: 5rem;
  --aff-head-gap: 3.5rem;
  --aff-card-gap: 2rem;
  --aff-bar-gap: var(--space-6, 1.5rem);
}

/* #content is a flex column on the homepage (section.cta1 gets order 150, the rest 200); legal-v9.css puts the hero
   at 10 and the closing card at 30. */
body.bp-aff-page #wrap #content.content > #aff-stats { order: 12 !important; }
body.bp-aff-page #wrap #content.content > #aff-how { order: 14 !important; }
body.bp-aff-page #wrap #content.content > #aff-earn { order: 16 !important; }
body.bp-aff-page #wrap #content.content > #aff-what { order: 18 !important; }
body.bp-aff-page #wrap #content.content > #aff-faq { order: 20 !important; }
body.bp-aff-page #wrap #content.content > #terms { order: 22 !important; }

body.bp-aff-page .bp-aff-section > .container {
  width: var(--aff-width);
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* in-page links land below whichever bar shows (affiliates-v9.js aims them; this is the no-script fallback) */
body.bp-aff-page #content > section,
body.bp-aff-page #join {
  scroll-margin-top: calc(var(--sticky-nav-height, 0px) + var(--aff-bar-gap));
}
body.bp-aff-page #content [tabindex="-1"]:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------------------------
   Header: the site header's markup with affiliate links (includes/affiliates/header.php)
   ------------------------------------------------------------------------------------------- */
/* "Join free": the homepage's coral pill, in the transparent and the floating bar alike */
@media (min-width: 1200px) {
  /* the theme's .main-nav items are flex columns; centre the pill vertically in the bar */
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join {
    display: flex;
    justify-content: center;
    margin-left: 0.75rem;
  }
  /* the bar's links fill its height (theme rules up to !important); the pill sits centred in it instead */
  body.bp-aff-page #wrap .main-header #account-primary-nav > li.bp-aff-nav-join > a {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: 2.625rem !important;
    padding: 0 1.375rem !important;
    border-radius: var(--radius-full, 9999px);
    background-image: linear-gradient(to right, var(--aff-coral) 0, var(--aff-orange) 100%);
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
    transition: filter 160ms ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
  }
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join > a:hover {
    filter: brightness(1.05);
  }
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join > a:active {
    transform: scale(0.98);
  }
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join > a .txt {
    color: #fff !important;
  }
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join > a::before,
  body.bp-aff-page .main-header #account-primary-nav > li.bp-aff-nav-join > a::after {
    display: none !important;
  }
}

/* Tablets: the homepage shows its header pill on phones only; here it's the way to the sign-up form, so tablets
   (768-1199px, the menu-button bar) keep it too */
@media (min-width: 768px) and (max-width: 1199px) {
  body.bp-aff-page .main-header .navbar-header .bp-dev-nav-pricing {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    width: auto !important;
    height: 2.125rem;
    margin: 0 0.75rem 0 auto !important;
    padding: 0 0.875rem !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1 !important;
    text-decoration: none;
  }
}

/* ---------------------------------------------------------------------------------------------
   Shared pieces
   ------------------------------------------------------------------------------------------- */

/* buttons: the homepage hero's coral pill */
body.bp-aff-page #wrap .bp-aff-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.3125rem;
  margin: 0;
  padding: 0 1.85rem;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
body.bp-aff-page #wrap .bp-aff-btn:active {
  transform: scale(0.98);
}
body.bp-aff-page #wrap .bp-aff-btn--primary {
  background-image: linear-gradient(to right, var(--aff-coral) 0, var(--aff-orange) 100%);
  color: #fff;
}
/* the homepage swaps to the reversed gradient on hover */
body.bp-aff-page #wrap .bp-aff-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(to right, var(--aff-orange) 0, var(--aff-coral) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.bp-aff-page #wrap .bp-aff-btn--primary:hover::before,
body.bp-aff-page #wrap .bp-aff-btn--primary:focus-visible::before {
  opacity: 1;
}
body.bp-aff-page #wrap .bp-aff-btn--primary:hover,
body.bp-aff-page #wrap .bp-aff-btn--primary:focus {
  color: #fff;
  text-decoration: none;
}
body.bp-aff-page #wrap .bp-aff-btn--block {
  display: flex;
  width: 100%;
}
body.bp-aff-page #wrap .bp-aff-btn:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 3px;
}

/* "Chat with our team" in the FAQ lead: the homepage's "Ask a question" link. The outline bubble turns solid and the
   words underline on hover; the icon is inline-block so the underline skips it. */
body.bp-aff-page #wrap #content p a.bp-aff-chat-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-left: 0.5rem;
  color: var(--aff-link);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}
body.bp-aff-page #wrap #content p a.bp-aff-chat-link .fa-comment {
  display: inline-block;
  font-size: 0.9em;
  transition: transform 160ms var(--ease-out, ease);
}
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:hover,
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:focus-visible {
  color: var(--aff-link-hover);
  text-decoration: none;
}
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:hover span,
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:hover .fa-comment,
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:focus-visible .fa-comment {
  font-weight: 900;
  transform: translateY(-1px);
}
body.bp-aff-page #wrap #content p a.bp-aff-chat-link:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* standalone link with the homepage's right chevron */
body.bp-aff-page #wrap a.bp-aff-more {
  display: inline-block;
  color: var(--aff-link);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 160ms ease;
}
body.bp-aff-page #wrap a.bp-aff-more .fa-chevron-right {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75em;
  vertical-align: 0.04em;
  transition: transform 160ms ease;
}
body.bp-aff-page #wrap a.bp-aff-more:hover {
  color: var(--aff-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.bp-aff-page #wrap a.bp-aff-more:hover .fa-chevron-right {
  transform: translateX(2px);
}

/* Tap areas: standalone and form links get an invisible ~44px-tall hit area (WCAG 2.5.5) without moving the layout */
body.bp-aff-page #wrap a.bp-aff-hit {
  position: relative;
}
/* The footer's top wave is decorative, but its box reaches up over the closing card's last link on tablets and its
   transparent part caught taps meant for "Log in to your dashboard" */
body.bp-aff-page .main-footer .custom-shape-divider-top-1621081063,
body.bp-aff-page .main-footer .custom-shape-divider-top-1621081063 svg {
  pointer-events: none;
}
body.bp-aff-page #wrap a.bp-aff-hit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.375rem;
  left: -0.375rem;
  height: 2.75rem;
  transform: translateY(-50%);
}

/* links inside copy */
body.bp-aff-page #wrap #content p a:not(.bp-aff-more),
body.bp-aff-page #wrap #content li a {
  color: var(--aff-link);
  text-decoration: none;
}
body.bp-aff-page #wrap #content p a:not(.bp-aff-more):hover,
body.bp-aff-page #wrap #content li a:hover {
  color: var(--aff-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* keeps a figure and its unit together ("45-day") */
body.bp-aff-page .bp-aff-nowrap {
  white-space: nowrap;
}

/* sections and tones */
body.bp-aff-page #wrap #content .bp-aff-section {
  position: relative;
  margin: 0;
  padding: var(--aff-section-top) 0 calc(var(--aff-wave-h) + var(--aff-section-bottom));
}
/* a section that shares its tone with the next one ends without a wave (the totals into How it works, Terms into the
   closing card, as the homepage's FAQ runs into its CTA) */
body.bp-aff-page #wrap #content .bp-aff-section--flat {
  padding-bottom: var(--aff-section-bottom);
}
body.bp-aff-page #wrap #content .bp-aff-tone-white { background: #fff; }
body.bp-aff-page #wrap #content .bp-aff-tone-grey { background: var(--aff-grey); }

/* Section waves, as the homepage draws .custom-shape-divider-bottom-1621016099: 150px tall (110px from 768 to 991px),
   its 1200x120 path stretched to 150% of the width from the left edge, so the right third is cut off. Phones use the
   hero-curve path homepage-v9-page.js swaps in there: 48px, mirrored, the same way on every section. The colour is
   the next section's tone. */
body.bp-aff-page .bp-aff-tone-white > .bp-aff-wave { color: var(--aff-grey); }
body.bp-aff-page .bp-aff-tone-grey > .bp-aff-wave { color: #fff; }
body.bp-aff-page .bp-aff-wave {
  position: absolute;
  right: 0;
  bottom: -1px; /* a section's height can land on a fraction; this keeps a hairline of its tone from showing */
  left: 0;
  height: calc(var(--aff-wave-h) + 1px);
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}
body.bp-aff-page .bp-aff-wave svg {
  display: block;
  height: 100%;
}
body.bp-aff-page .bp-aff-wave .bp-aff-wave-wide {
  width: calc(150% + 1.3px);
}
body.bp-aff-page .bp-aff-wave .bp-aff-wave-phone {
  display: none;
  width: calc(100% + 2px);
  margin-left: -1px;
  transform: scaleX(-1);
}

/* section heading block */
body.bp-aff-page #wrap .bp-aff-head {
  max-width: 50rem;
  margin: 0 auto var(--aff-head-gap);
  text-align: center;
}
body.bp-aff-page #wrap .bp-aff-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3, 0.75rem);
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--aff-pill-line);
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  color: var(--aff-eyebrow);
  font-size: var(--text-xs, 0.75rem) !important;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--tracking-caps, 0.06em);
  text-transform: uppercase;
}
body.bp-aff-page #wrap .bp-aff-head h2 {
  margin: 0 0 var(--space-4, 1rem);
  padding: 0.5rem 0 0;
  color: var(--aff-ink);
  font-size: clamp(2.25rem, 3.5vw, 3.125rem) !important;
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-tight, 1.15);
  letter-spacing: var(--tracking-tight, -0.02em);
}
body.bp-aff-page #wrap .bp-aff-head .bp-aff-lead {
  margin: 0;
  color: var(--aff-body);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 400;
  line-height: var(--leading-relaxed, 1.65);
}

/* cards */
body.bp-aff-page #wrap .bp-aff-card {
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--aff-line);
  border-radius: var(--aff-radius);
  box-shadow: var(--aff-card-shadow);
}
body.bp-aff-page #wrap .bp-aff-cards {
  display: grid;
  gap: var(--aff-card-gap);
}
body.bp-aff-page #wrap .bp-aff-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.bp-aff-page #wrap #content h3 {
  margin: 0;
  padding: 0;
  color: var(--aff-ink);
  font-size: 1.375rem !important;
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-snug, 1.35);
  letter-spacing: -0.01em;
}
body.bp-aff-page #wrap .bp-aff-card p,
body.bp-aff-page #wrap .bp-aff-reason p {
  margin: 0;
  color: var(--aff-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--leading-relaxed, 1.65);
}

/* green ticks list */
body.bp-aff-page #wrap .bp-aff-checks {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap .bp-aff-checks > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 0.875rem;
  padding: 0;
  color: var(--aff-ink);
  font-size: 1rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap .bp-aff-checks > li:last-child {
  margin-bottom: 0;
}
body.bp-aff-page #wrap .bp-aff-checks .fa-check-circle {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--aff-green);
}

/* emoji in a pastel circle (the homepage benefits' icons) */
body.bp-aff-page #wrap .bp-aff-emoji {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}
body.bp-aff-page #wrap .bp-aff-emoji img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
body.bp-aff-page #wrap .bp-aff-emoji--green { background: #e3f2e8; }
body.bp-aff-page #wrap .bp-aff-emoji--blue { background: #e3effb; }
body.bp-aff-page #wrap .bp-aff-emoji--peach { background: #fde9de; }

/* ---------------------------------------------------------------------------------------------
   Hero: the offer beside the sign-up form (legal-v9.css draws the gradient, photo wash, curve and the 45px H1)
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #legal-hero .bp-aff-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30rem;
  column-gap: clamp(3rem, 5.5vw, 5rem);
  align-items: center;
}
/* the team photo sits behind the form, under the hero's navy wash */
body.bp-aff-page #legal-hero > .bp-aff-hero-photo img {
  object-position: 50% 30%;
  opacity: 0.5;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  color: var(--bp-hero-navy, #1c4a7a);
  font-size: var(--text-xs, 0.75rem) !important;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--tracking-caps, 0.06em);
  text-transform: uppercase;
}
body.bp-aff-page #wrap #legal-hero h1 {
  max-width: 36rem;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-lead {
  max-width: 36rem;
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
  color: rgba(255, 255, 255, 0.94); /* ≥ 4.9:1 on the gradient's lightest spot */
  font-size: var(--text-xl, 1.25rem);
  font-weight: 400;
  line-height: var(--leading-relaxed, 1.65);
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-points {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-points > li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.0625rem;
  line-height: 1.4;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-points > li:last-child {
  margin-bottom: 0;
}
/* green disc with a white check: Font Awesome's solid check-circle cuts the check out, so on the navy hero it read as
   transparent */
body.bp-aff-page #wrap #legal-hero .bp-aff-tick {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.08em;
  border-radius: 50%;
  background: var(--aff-green);
  color: #fff;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-tick .fa-check {
  font-size: 0.5625rem;
  line-height: 1;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-points strong {
  color: #fff;
  font-weight: 600;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-proof {
  display: inline-block;
  margin: 2rem 0 0;
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.75rem;
  background: rgba(8, 24, 48, 0.28); /* darkens what's behind (the photo, the gradient's light spot): white text ≥ 5:1 */
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.4;
}
body.bp-aff-page #wrap #legal-hero .bp-aff-hero-proof strong {
  margin-right: 0.15em;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
}

/* sign-up card */
body.bp-aff-page #wrap .bp-aff-join-card {
  position: relative;
  padding: 2.25rem 2.5rem 1.75rem;
  background: #fff;
  border-radius: var(--aff-radius);
  box-shadow: 0 30px 60px rgba(8, 24, 48, 0.35);
}
/* one line at every width from 360px up, so the header spans the card instead of stacking on its left */
body.bp-aff-page #wrap .bp-aff-join-card h2 {
  margin: 0;
  padding: 0;
  color: var(--aff-ink);
  font-size: 1.625rem !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
body.bp-aff-page #wrap .bp-aff-join-head {
  margin-bottom: 1.75rem;
}
body.bp-aff-page #wrap .bp-aff-join-lead {
  margin: 0.25rem 0 0;
  color: var(--aff-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap .bp-aff-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #fecdd3;
  border-radius: 0.75rem;
  background: #fff1f2;
  color: #9f1239;
  font-size: 0.875rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap .bp-aff-alert .fas {
  margin-top: 0.2em;
}
body.bp-aff-page #wrap #content .bp-aff-alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.bp-aff-page #wrap .bp-aff-form {
  margin: 0;
}
body.bp-aff-page #wrap .bp-aff-field {
  margin: 0 0 1rem;
}
body.bp-aff-page #wrap .bp-aff-field label {
  display: block;
  margin: 0 0 0.375rem;
  color: var(--aff-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
body.bp-aff-page #wrap .bp-aff-field input {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid #d5d9e0;
  border-radius: 0.75rem;
  background: #f9fafb;
  box-shadow: none;
  color: var(--aff-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
body.bp-aff-page #wrap .bp-aff-field input::placeholder {
  color: #858c98;
  opacity: 1;
}
body.bp-aff-page #wrap .bp-aff-field input:hover {
  border-color: #b9bfc9;
}
body.bp-aff-page #wrap .bp-aff-field input:focus {
  outline: none;
  border-color: var(--aff-link);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 111, 201, 0.18);
}
/* Field messages: the password hint, and the error affiliates-v9.js writes under a field when you leave it with a
   problem (red border, message in #b42318: 6.6:1 on white). The hint makes way for the error. */
body.bp-aff-page #wrap .bp-aff-field-hint,
body.bp-aff-page #wrap .bp-aff-field-error {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}
/* the password rule: a grey circle until the password is long enough, then a green tick (affiliates-v9.js sets
   .is-met). The icon is always there, so the words don't shift when it changes. */
body.bp-aff-page #wrap .bp-aff-field-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--aff-muted);
  transition: color 160ms ease;
}
body.bp-aff-page #wrap .bp-aff-field-hint::before {
  content: "\f111";
  flex: 0 0 auto;
  width: 1em;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  text-align: center;
}
body.bp-aff-page #wrap .bp-aff-field-hint.is-met {
  color: var(--aff-green-ink);
}
body.bp-aff-page #wrap .bp-aff-field-hint.is-met::before {
  content: "\f058";
  font-weight: 900;
}
body.bp-aff-page #wrap .bp-aff-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: #b42318;
  font-weight: 500;
}
body.bp-aff-page #wrap .bp-aff-field-error[hidden] {
  display: none;
}
body.bp-aff-page #wrap .bp-aff-field-error::before {
  content: "\f06a";
  flex: 0 0 auto;
  margin-top: 0.05em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
body.bp-aff-page #wrap .bp-aff-field.is-invalid .bp-aff-field-hint {
  display: none;
}
body.bp-aff-page #wrap .bp-aff-field.is-invalid input {
  border-color: #d92d20;
  background: #fff;
}
body.bp-aff-page #wrap .bp-aff-field.is-invalid input:focus {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15);
}

/* show / hide password, inside the field */
body.bp-aff-page #wrap .bp-aff-password {
  position: relative;
}
body.bp-aff-page #wrap .bp-aff-password input {
  padding-right: 3.25rem;
}
/* Centred with top/bottom/margin rather than a transform: the site's pressed-button style (homepage-v9.css, scale
   0.96 on :active) replaces any transform, which made the button drop while it was held. */
body.bp-aff-page #wrap .bp-aff-password-toggle {
  position: absolute;
  top: 0;
  right: 0.375rem;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: auto 0;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--aff-body);
  font-size: 1rem;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
}
body.bp-aff-page #wrap .bp-aff-password-toggle[hidden] {
  display: none;
}
body.bp-aff-page #wrap .bp-aff-password-toggle:hover {
  background: #eef0f3;
  color: var(--aff-ink);
}
body.bp-aff-page #wrap .bp-aff-password-toggle:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 1px;
}

/* the button while the form is sending */
body.bp-aff-page #wrap .bp-aff-btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

body.bp-aff-page #wrap .bp-aff-form .bp-aff-btn--block {
  margin-top: 1.375rem;
  min-height: 3.375rem;
  font-size: 1.0625rem;
}
body.bp-aff-page #wrap .bp-aff-form-ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap .bp-aff-form-ticks > li {
  margin: 0;
  padding: 0;
  color: var(--aff-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap .bp-aff-form-ticks .fa-check-circle {
  margin-right: 0.4rem;
  color: var(--aff-green-strong);
}
body.bp-aff-page #wrap .bp-aff-form-terms {
  margin: 0.5rem 0 0;
  color: var(--aff-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}
body.bp-aff-page #wrap .bp-aff-form-login {
  margin: 1.25rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--aff-rule);
  color: var(--aff-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}
body.bp-aff-page #wrap #content .bp-aff-form-login a {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   Affiliate totals (the homepage's stat row under its hero)
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap #content #aff-stats {
  padding-top: 0.75rem;
  padding-bottom: 0;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-title {
  margin: 0 0 2rem;
  padding: 0;
  color: var(--aff-ink);
  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0.25rem 0.75rem;
  text-align: center;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-item + .bp-aff-stats-item {
  border-left: 1px solid var(--aff-pill-line);
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-num {
  color: var(--aff-ink);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-label {
  margin-top: 0.35rem;
  color: var(--aff-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-note {
  margin: 2rem 0 0;
  color: var(--aff-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}
body.bp-aff-page #wrap #aff-stats .bp-aff-stats-rule {
  margin: 2rem 0 0;
  border: 0;
  border-top: 1px solid var(--aff-line);
}

/* ---------------------------------------------------------------------------------------------
   How it works: a numbered track over three photo cards (the homepage guarantee's stage row)
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap .bp-aff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aff-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap .bp-aff-step {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
body.bp-aff-page #wrap .bp-aff-step-track {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
body.bp-aff-page #wrap .bp-aff-step-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--aff-green-strong);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}
body.bp-aff-page #wrap .bp-aff-step-kicker {
  color: var(--aff-eyebrow);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--tracking-caps, 0.06em);
  text-transform: uppercase;
}
/* the connector runs across the gap to the next step and ends in an arrow head */
body.bp-aff-page #wrap .bp-aff-step:not(:last-child) .bp-aff-step-track::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin: 0 calc(var(--aff-card-gap) * -1 + 0.75rem) 0 0.5rem;
  background: #c3c8cf;
}
body.bp-aff-page #wrap .bp-aff-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.1875rem - 3.5px);
  right: calc(var(--aff-card-gap) * -1 + 0.8rem);
  width: 7px;
  height: 7px;
  border-top: 1px solid #9aa1ab;
  border-right: 1px solid #9aa1ab;
  transform: rotate(45deg);
}
body.bp-aff-page #wrap .bp-aff-step-card {
  flex: 1 1 auto;
  padding: 0.75rem 0.75rem 1.75rem;
}
body.bp-aff-page #wrap .bp-aff-step-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0.625rem;
  object-fit: cover;
}
body.bp-aff-page #wrap #content .bp-aff-step-card h3 {
  margin: 1.25rem 0.75rem 0.375rem;
  font-size: 1.25rem !important;
}
body.bp-aff-page #wrap .bp-aff-step-card p {
  margin: 0 0.75rem;
  color: var(--aff-body);
}
body.bp-aff-page #wrap .bp-aff-center-cta {
  margin-top: 3.5rem;
  text-align: center;
}
body.bp-aff-page #wrap .bp-aff-center-note {
  margin: 1rem 0 0;
  color: var(--aff-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap .bp-aff-center-note .fa-check {
  margin-right: 0.45rem;
  color: var(--aff-green-strong);
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------------------------------
   Commission: what each package earns, beside the three reasons it adds up
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap .bp-aff-earn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
body.bp-aff-page #wrap .bp-aff-earn {
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--aff-line);
  border-radius: var(--aff-radius);
  box-shadow: var(--aff-card-shadow);
}
body.bp-aff-page #wrap .bp-aff-earn-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}
body.bp-aff-page #wrap .bp-aff-earn-table caption {
  padding: 0 0 0.75rem;
  caption-side: top;
  color: var(--aff-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
/* the theme draws a bottom border on every <tr>; the cells carry the rules here */
body.bp-aff-page #wrap .bp-aff-earn-table tr {
  border: 0;
}
body.bp-aff-page #wrap .bp-aff-earn-table th,
body.bp-aff-page #wrap .bp-aff-earn-table td {
  padding: 0.85rem 0;
  border: 0;
  border-top: 1px solid var(--aff-rule);
  background: transparent;
  vertical-align: middle;
}
body.bp-aff-page #wrap .bp-aff-earn-table thead th {
  padding: 0.5rem 0;
  border-top: 0;
  color: var(--aff-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}
body.bp-aff-page #wrap .bp-aff-earn-table thead th:first-child,
body.bp-aff-page #wrap .bp-aff-earn-table tbody th {
  text-align: left;
}
body.bp-aff-page #wrap .bp-aff-earn-name {
  display: block;
  color: var(--aff-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
body.bp-aff-page #wrap .bp-aff-earn-for {
  display: block;
  margin-top: 0.15rem;
  color: var(--aff-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
}
body.bp-aff-page #wrap .bp-aff-earn-table td {
  color: var(--aff-body);
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.bp-aff-page #wrap .bp-aff-earn-table td.bp-aff-earn-you {
  padding-left: 1.5rem;
  color: var(--aff-green-ink);
  font-size: 1.125rem;
  font-weight: 700;
}
/* premium add-ons: a labelled group under the packages, with the homepage add-on cards' icons */
body.bp-aff-page #wrap .bp-aff-earn-table tr.bp-aff-earn-group th {
  padding: 1.25rem 0 0.5rem;
  color: var(--aff-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}
body.bp-aff-page #wrap .bp-aff-earn-table tr.bp-aff-earn-group th span {
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
body.bp-aff-page #wrap .bp-aff-earn-addons .bp-aff-earn-name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
body.bp-aff-page #wrap .bp-aff-earn-addons .bp-aff-earn-name img {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  object-fit: contain;
}
body.bp-aff-page #wrap .bp-aff-earn .bp-aff-earn-foot {
  margin: 0.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--aff-rule);
  color: var(--aff-body);
  font-size: 0.875rem;
  line-height: 1.6;
}
body.bp-aff-page #wrap .bp-aff-earn-foot strong {
  color: var(--aff-ink);
  font-weight: 600;
}
body.bp-aff-page #wrap .bp-aff-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap .bp-aff-reason {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
}
body.bp-aff-page #wrap .bp-aff-reason:last-child {
  margin-bottom: 0;
}
body.bp-aff-page #wrap #content .bp-aff-reason h3 {
  margin: 0.2rem 0 0.375rem;
  font-size: 1.25rem !important;
}

/* ---------------------------------------------------------------------------------------------
   About BrandPush: the video matches the card beside it in height
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap .bp-aff-what-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--aff-card-gap);
  align-items: stretch;
}
body.bp-aff-page #wrap .bp-aff-video {
  display: flex;
  min-width: 0;
}
body.bp-aff-page #wrap .bp-aff-video-btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 18rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--aff-radius);
  background: #2c2f6b;
  box-shadow: var(--aff-card-shadow);
  cursor: pointer;
}
body.bp-aff-page #wrap .bp-aff-video-btn img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
body.bp-aff-page #wrap .bp-aff-video-btn:hover img {
  transform: scale(1.02);
}
body.bp-aff-page #wrap .bp-aff-video-btn:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 3px;
}
/* the homepage's white "See how it works" pill: play icon, words, then the length in the price style */
body.bp-aff-page #wrap .bp-aff-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.05rem 0.8rem 1.1rem;
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  color: var(--aff-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: transform 0.2s var(--ease-out, ease);
}
body.bp-aff-page #wrap .bp-aff-video-btn:hover .bp-aff-play {
  transform: translate(-50%, -50%) scale(1.04);
}
body.bp-aff-page #wrap .bp-aff-play .fa-play {
  font-size: 0.75rem;
}
body.bp-aff-page #wrap .bp-aff-play-time {
  color: #4b5563;
  font-size: 0.7875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.bp-aff-page #wrap .bp-aff-what-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 2.25rem;
}
body.bp-aff-page #wrap #content .bp-aff-what-card h3 {
  margin-bottom: 1.25rem;
}
body.bp-aff-page #wrap .bp-aff-what-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--aff-rule);
}
body.bp-aff-page #wrap .bp-aff-what-card .bp-aff-checks {
  margin-bottom: 1.75rem;
}
/* Trustpilot rating, as the homepage footer shows it: no pill inside the card, just score, stars and wordmark over
   the review count, on the card's closing rule */
body.bp-aff-page #wrap a.bp-aff-rating {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--aff-ink);
  text-decoration: none;
}
body.bp-aff-page #wrap .bp-aff-rating-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body.bp-aff-page #wrap .bp-aff-rating-score {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
body.bp-aff-page #wrap a.bp-aff-rating .bp8-tp-stars {
  display: block;
  width: 5.5rem;
  height: auto;
}
body.bp-aff-page #wrap a.bp-aff-rating .bp-aff-rating-logo {
  display: block;
  width: auto;
  height: 1.125rem;
  color: #191919;
}
body.bp-aff-page #wrap .bp-aff-rating-count {
  color: var(--aff-body);
  font-size: 0.8125rem;
  line-height: 1.3;
}
body.bp-aff-page #wrap a.bp-aff-rating:hover .bp-aff-rating-count {
  color: var(--aff-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.bp-aff-page #wrap a.bp-aff-rating:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------------------------
   FAQ: two columns of questions with the homepage's chevrons, in one card
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap .bp-aff-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  margin: 0;
  padding: 0.75rem 2.5rem;
}
body.bp-aff-page #wrap .bp-aff-faq-item {
  margin: 0;
  border-bottom: 1px solid var(--aff-rule);
}
body.bp-aff-page #wrap .bp-aff-faq-col .bp-aff-faq-item:last-child {
  border-bottom: 0;
}
body.bp-aff-page #wrap .bp-aff-faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 0;
  color: var(--aff-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
body.bp-aff-page #wrap .bp-aff-faq-item > summary::-webkit-details-marker {
  display: none;
}
body.bp-aff-page #wrap .bp-aff-faq-item > summary .fa-chevron-right {
  flex: 0 0 auto;
  width: 0.75rem;
  margin-top: 0.4em;
  font-size: 0.75rem;
  text-align: center;
  transition: transform 0.2s var(--ease-out, ease);
}
body.bp-aff-page #wrap .bp-aff-faq-item[open] > summary .fa-chevron-right {
  transform: rotate(90deg);
}
body.bp-aff-page #wrap .bp-aff-faq-item > summary:hover span {
  color: var(--aff-link-hover);
}
body.bp-aff-page #wrap .bp-aff-faq-item > summary:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 2px;
  border-radius: 4px;
}
body.bp-aff-page #wrap .bp-aff-faq-answer {
  padding: 0 0 1.25rem 1.5rem;
}
body.bp-aff-page #wrap .bp-aff-faq .bp-aff-faq-answer p,
body.bp-aff-page #wrap .bp-aff-faq .bp-aff-faq-answer li {
  color: var(--aff-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
}
body.bp-aff-page #wrap .bp-aff-faq .bp-aff-faq-answer p {
  margin: 0 0 0.75rem;
}
body.bp-aff-page #wrap .bp-aff-faq .bp-aff-faq-answer p:last-child {
  margin-bottom: 0;
}
body.bp-aff-page #wrap .bp-aff-faq-answer ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
}
body.bp-aff-page #wrap .bp-aff-faq-answer ul:last-child {
  margin-bottom: 0;
}
body.bp-aff-page #wrap .bp-aff-faq-answer li {
  margin: 0 0 0.25rem;
  padding: 0;
}
body.bp-aff-page #wrap .bp-aff-faq-answer li::marker {
  color: var(--aff-muted);
}

/* ---------------------------------------------------------------------------------------------
   Terms and rules: the terms page's summary-card list, twice
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap .bp-aff-list-card {
  padding: 2rem 2rem 1rem;
}
body.bp-aff-page #wrap .bp-aff-points {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
body.bp-aff-page #wrap .bp-aff-points > li {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.875rem 0;
  border-top: 1px solid var(--aff-rule);
  color: var(--aff-ink);
  font-size: 1rem;
  line-height: 1.45;
}
/* the terms page's icon tint, darkened so the glyphs read (3:1 for icons) */
body.bp-aff-page #wrap .bp-aff-points .bp-legal-icon {
  color: var(--aff-link);
}

/* ---------------------------------------------------------------------------------------------
   Closing card (legal-v9.css lays it out): darker text, the homepage CTA's tick row
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page #wrap section.bp-legal-cta .lead {
  color: var(--aff-body) !important;
}
/* homepage-v9-mobile.css gives the closing card's link button a 24px bottom margin (its <button> twin on the legal
   pages escapes it) */
body.bp-aff-page #wrap #content section.bp-legal-cta .bp-legal-cta-actions .btn {
  margin: 0 !important;
}
body.bp-aff-page #wrap section.bp-legal-cta .bp-aff-cta-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  color: var(--aff-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
body.bp-aff-page #wrap section.bp-legal-cta .bp-aff-cta-checks .fa-check-circle {
  margin-right: 0.4rem;
  color: var(--aff-green-strong);
}
body.bp-aff-page #wrap section.bp-legal-cta .bp-legal-related {
  color: var(--aff-muted);
}
body.bp-aff-page #wrap section.bp-legal-cta .bp-legal-related a {
  color: var(--aff-link);
}
body.bp-aff-page #wrap section.bp-legal-cta .bp-legal-related a:hover {
  color: var(--aff-link-hover);
}

/* ---------------------------------------------------------------------------------------------
   Chat bubble: hidden while it would sit on top of the sign-up form (affiliates-v9.js toggles the class on <html>).
   Covers the footer's stand-in button and Intercom's own launcher once Intercom has loaded.
   ------------------------------------------------------------------------------------------- */
html.bp-aff-chat-aside .intercom-faceade,
html.bp-aff-chat-aside .intercom-lightweight-app-launcher,
html.bp-aff-chat-aside .intercom-launcher-frame,
html.bp-aff-chat-aside .intercom-launcher {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
}

/* ---------------------------------------------------------------------------------------------
   Video dialog
   ------------------------------------------------------------------------------------------- */
body.bp-aff-page .bp-aff-video-dialog {
  width: min(60rem, calc(100vw - 2rem));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
body.bp-aff-page .bp-aff-video-dialog::backdrop {
  background: rgba(10, 20, 35, 0.85);
}
body.bp-aff-page .bp-aff-video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #000;
}
body.bp-aff-page .bp-aff-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
body.bp-aff-page .bp-aff-video-close {
  position: absolute;
  top: -3.25rem;
  right: -0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.bp-aff-page .bp-aff-video-close:hover {
  background: rgba(255, 255, 255, 0.14);
}
body.bp-aff-page .bp-aff-video-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
   Tablets and small desktops
   ------------------------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  body.bp-aff-page {
    --aff-section-top: 5rem;
    --aff-section-bottom: 4rem;
    --aff-card-gap: 1.5rem;
    --aff-bar-gap: calc(var(--m-header-h, 73px) + var(--space-6, 1.5rem));
  }
  body.bp-aff-page #legal-hero .bp-aff-hero-grid {
    grid-template-columns: minmax(0, 1fr) 27rem;
    column-gap: 2.5rem;
  }
}

@media (max-width: 991px) {
  body.bp-aff-page {
    --aff-wave-h: 110px;
  }
  /* the photo would sit behind the headline once the form stacks; loading="lazy" means it isn't downloaded either */
  body.bp-aff-page #legal-hero > .bp-aff-hero-photo {
    display: none;
  }
  /* the form goes under the offer */
  body.bp-aff-page #legal-hero .bp-aff-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  body.bp-aff-page #wrap .bp-aff-join-card {
    width: 100%;
  }
  body.bp-aff-page #wrap .bp-aff-earn-grid,
  body.bp-aff-page #wrap .bp-aff-what-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  /* stacked, the video keeps its own shape */
  body.bp-aff-page #wrap .bp-aff-video-btn {
    min-height: 0;
    aspect-ratio: 720 / 517;
  }
  body.bp-aff-page #wrap .bp-aff-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  body.bp-aff-page #wrap .bp-aff-faq {
    column-gap: 2rem;
    padding: 0.75rem 1.75rem;
  }
  body.bp-aff-page #wrap #content .bp-aff-step-card h3 {
    font-size: 1.125rem !important;
  }
}

/* ---------------------------------------------------------------------------------------------
   Phones: the homepage's --bp-m-* spacing, plain caps eyebrows, left-aligned headings, 48px waves
   ------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.bp-aff-page {
    --aff-width: 100%;
    --aff-wave-h: var(--bp-m-wave-above, 3rem);
    --aff-section-top: var(--bp-m-wave-below, 1.5rem);
    --aff-section-bottom: var(--bp-m-wave-above, 3rem);
    --aff-head-gap: 2rem;
    --aff-card-gap: var(--bp-m-card-gap, 1.5rem);
  }
  body.bp-aff-page .bp-aff-section > .container {
    padding-left: var(--bp-m-gutter, 1.5rem);
    padding-right: var(--bp-m-gutter, 1.5rem);
  }
  body.bp-aff-page .bp-aff-wave .bp-aff-wave-wide {
    display: none;
  }
  body.bp-aff-page .bp-aff-wave .bp-aff-wave-phone {
    display: block;
  }

  /* hero */
  body.bp-aff-page #wrap #legal-hero .bp-aff-hero-eyebrow {
    margin-bottom: var(--space-3, 0.75rem);
    padding: 0;
    background: none;
    color: #fff;
  }
  body.bp-aff-page #wrap #legal-hero .bp-aff-hero-lead {
    margin-bottom: 1.5rem;
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.5;
  }
  body.bp-aff-page #wrap #legal-hero .bp-aff-hero-points > li {
    font-size: 1rem;
  }
  body.bp-aff-page #wrap #legal-hero .bp-aff-hero-proof {
    margin-top: 1.5rem;
  }
  body.bp-aff-page #legal-hero .bp-aff-hero-grid {
    row-gap: 2rem;
  }
  body.bp-aff-page #wrap .bp-aff-join-card {
    max-width: none;
    padding: 1.5rem 1.25rem 1.375rem;
  }
  body.bp-aff-page #wrap .bp-aff-join-head {
    margin-bottom: 1.5rem;
  }
  body.bp-aff-page #wrap .bp-aff-join-card h2 {
    font-size: 1.3125rem !important;
  }

  /* totals: two columns */
  body.bp-aff-page #wrap #content #aff-stats {
    padding-top: var(--bp-m-hero-curve-below, 1.25rem);
    padding-bottom: 0;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-rule {
    margin-top: 1.5rem;
  }
  /* no wave above How it works, so it takes the wave's 48px gap */
  body.bp-aff-page #wrap #content #aff-how {
    padding-top: var(--bp-m-wave-above, 3rem);
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-title {
    margin-bottom: 1.5rem;
    font-size: 1.125rem !important;
    text-align: left;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-item {
    align-items: flex-start;
    padding: 0 0 0 1rem;
    text-align: left;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-num {
    font-size: 1.375rem;
  }
  body.bp-aff-page #wrap #aff-stats .bp-aff-stats-note {
    margin-top: 1.5rem;
    text-align: left;
  }

  /* headings */
  body.bp-aff-page #wrap .bp-aff-head {
    text-align: left;
  }
  body.bp-aff-page #wrap .bp-aff-eyebrow {
    display: block;
    padding: 0;
    border: 0;
    background: none;
  }
  body.bp-aff-page #wrap .bp-aff-head h2 {
    padding-top: 0;
    font-size: 1.875rem !important;
  }
  body.bp-aff-page #wrap .bp-aff-head .bp-aff-lead {
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.5;
  }
  body.bp-aff-page #wrap #content h3 {
    font-size: 1.1875rem !important;
  }

  /* steps stack, without the connector */
  body.bp-aff-page #wrap .bp-aff-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  body.bp-aff-page #wrap .bp-aff-step:not(:last-child) .bp-aff-step-track::after,
  body.bp-aff-page #wrap .bp-aff-step:not(:last-child)::after {
    content: none;
  }
  body.bp-aff-page #wrap .bp-aff-step-track {
    margin-bottom: 0.75rem;
  }
  body.bp-aff-page #wrap #content .bp-aff-step-card h3 {
    font-size: 1.1875rem !important;
  }
  body.bp-aff-page #wrap .bp-aff-center-cta {
    margin-top: 2rem;
    text-align: left;
  }
  body.bp-aff-page #wrap .bp-aff-center-cta .bp-aff-btn {
    width: 100%;
  }
  body.bp-aff-page #wrap .bp-aff-center-note {
    text-align: center;
  }

  /* commission */
  body.bp-aff-page #wrap .bp-aff-earn-grid,
  body.bp-aff-page #wrap .bp-aff-what-grid {
    row-gap: 2rem;
  }
  body.bp-aff-page #wrap .bp-aff-earn {
    padding: 1.25rem;
  }
  body.bp-aff-page #wrap .bp-aff-earn-table td.bp-aff-earn-you {
    padding-left: 1rem;
  }
  body.bp-aff-page #wrap .bp-aff-reason {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  body.bp-aff-page #wrap .bp-aff-emoji {
    width: 3rem;
    height: 3rem;
  }
  body.bp-aff-page #wrap .bp-aff-emoji img {
    width: 1.5rem;
    height: 1.5rem;
  }
  body.bp-aff-page #wrap #content .bp-aff-reason h3 {
    margin-top: 0.1rem;
    font-size: 1.1875rem !important;
  }

  /* about */
  body.bp-aff-page #wrap .bp-aff-what-card {
    padding: 1.5rem;
  }
  /* the chat link always wraps under "Can't find an answer?" here: its own line, no side margin */
  body.bp-aff-page #wrap #content p a.bp-aff-chat-link {
    display: flex;
    width: max-content;
    margin: 0.375rem 0 0;
  }

  /* FAQ */
  body.bp-aff-page #wrap .bp-aff-faq {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.25rem 1.25rem;
  }
  body.bp-aff-page #wrap .bp-aff-faq-col:first-child .bp-aff-faq-item:last-child {
    border-bottom: 1px solid var(--aff-rule);
  }

  /* terms */
  body.bp-aff-page #wrap .bp-aff-list-card {
    padding: 1.5rem 1.5rem 0.5rem;
  }
  body.bp-aff-page #wrap .bp-aff-points > li {
    align-items: flex-start;
    line-height: 1.5;
  }

  /* closing card ticks sit left, like its button */
  body.bp-aff-page #wrap section.bp-legal-cta .bp-aff-cta-checks {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bp-aff-page #wrap .bp-aff-btn,
  body.bp-aff-page #wrap .bp-aff-btn--primary::before,
  body.bp-aff-page #wrap .bp-aff-video-btn img,
  body.bp-aff-page #wrap .bp-aff-play,
  body.bp-aff-page #wrap .bp-aff-faq-item > summary .fa-chevron-right,
  body.bp-aff-page #wrap a.bp-aff-more .fa-chevron-right {
    transition: none;
  }
  body.bp-aff-page #wrap .bp-aff-video-btn:hover img {
    transform: none;
  }
}