/* Homepage marketing sections (template-parts/home/sections.php).
   Front page only — see inc/enqueue.php.

   Kept in its own sheet rather than added to home.css, which is about the
   exchange chrome (fixed sidebar, game slider) and has nothing to do with
   these. Every colour, radius and font below comes from the tokens already
   defined in theme.css. */

/* ============================================================
   Section shell
   ============================================================ */
.bpx-sec {
  padding: 64px 0;
  background: var(--bpx-white);
  font-family: var(--bpx-font);
}

.bpx-sec--tint {
  background: var(--bpx-surface-alt);
  border-block: 1px solid var(--bpx-border);
}

.bpx-sec--dark {
  background: linear-gradient(160deg, var(--bpx-navy-light), var(--bpx-navy) 60%, var(--bpx-navy-dark));
  position: relative;
  overflow: hidden;
}

/* Same dot field as the page hero, so the dark blocks on the site match. */
.bpx-sec--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}

.bpx-sec__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section heading block ──
   Centred: the headings, the supporting line and the calls to action all sit
   on the page's centre line rather than ranging left. */
.bpx-sec__head {
  max-width: 680px;
  margin: 0 auto 38px;
  text-align: center;
}

.bpx-sec__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bpx-accent);
}

.bpx-sec__eyebrow--light {
  color: var(--bpx-accent-bright);
}

.bpx-sec__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bpx-navy);
}

.bpx-sec__title--light {
  color: var(--bpx-white);
}

.bpx-sec__lede {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bpx-ink-body);
}

.bpx-sec__lede--light {
  color: var(--bpx-on-dark);
}

.bpx-sec__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .bpx-sec {
    padding: 48px 0;
  }

  .bpx-sec__title {
    font-size: 27px;
  }

  .bpx-sec__lede {
    font-size: 16px;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.bpx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--bpx-radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.bpx-btn:hover {
  transform: translateY(-2px);
}

.bpx-btn--primary {
  background: var(--bpx-accent);
  color: var(--bpx-white);
  box-shadow: 0 12px 26px -12px rgba(var(--bpx-accent-rgb), 0.75);
}

.bpx-btn--primary:hover {
  background: var(--bpx-accent-hover);
  color: var(--bpx-white);
}

.bpx-btn--ghost {
  background: transparent;
  color: var(--bpx-accent);
  border-color: var(--bpx-border-strong);
}

.bpx-btn--ghost:hover {
  background: var(--bpx-white);
  border-color: var(--bpx-accent);
  color: var(--bpx-accent-hover);
}

.bpx-btn--ghost-light {
  background: var(--bpx-overlay-subtle);
  color: var(--bpx-white);
  border-color: var(--bpx-border-faint);
}

.bpx-btn--ghost-light:hover {
  background: var(--bpx-overlay-hover);
  color: var(--bpx-white);
  border-color: var(--bpx-accent-bright);
}

/* ============================================================
   Video section
   Self-hosted MP4 with the browser's own controls — no third-party player.
   ============================================================ */

/* Copy and player side by side: a vertical clip centred in a full-width band
   would be a narrow strip in a sea of navy. */
.bpx-videosec {
  display: grid;
  /* Capped rather than 1fr, so the steps and the player read as one centred
     pair instead of drifting to opposite edges of a wide section. */
  grid-template-columns: minmax(0, 460px) auto;
  justify-content: center;
  gap: 48px;
  align-items: center;
}

.bpx-videosec--nomedia {
  grid-template-columns: minmax(0, 1fr);
}

/* The steps column is the only thing left beside the video now that the
   heading and buttons have moved to the section's centre line. */
.bpx-videosec__body {
  min-width: 0;
}

@media (max-width: 900px) {
  .bpx-videosec {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    justify-items: center;
  }

  .bpx-videosec__body {
    justify-self: stretch;
  }
}

.bpx-video {
  position: relative;
  margin: 0 auto;
  border-radius: var(--bpx-radius-lg);
  overflow: hidden;
  background: var(--bpx-navy-deep);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
}

/* A normal recording and a phone-shot clip need different frames — a vertical
   video inside a 16:9 box is two black bars and a sliver of picture. */
.bpx-video--landscape {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
}

.bpx-video--portrait {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

.bpx-video__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--bpx-navy-deep);
}

/* ── Steps beside the video ── */
.bpx-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 520px;
}

.bpx-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.bpx-step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bpx-accent);
  color: var(--bpx-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.bpx-step__body {
  display: block;
}

.bpx-step__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bpx-white);
}

.bpx-step__text {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bpx-on-dark-dim);
}

/* ============================================================
   Grids
   ============================================================ */
.bpx-grid {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpx-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .bpx-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .bpx-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Benefit tile ── */
.bpx-tile {
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  padding: 26px 24px;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.bpx-tile:hover {
  border-color: var(--bpx-accent);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(var(--bpx-navy-rgb), 0.6);
}

.bpx-tile__icon {
  display: block;
  margin-bottom: 18px;
}

.bpx-tile__icon img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--bpx-radius-lg);
  object-fit: contain;
}

.bpx-tile__title {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--bpx-navy);
}

.bpx-tile__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bpx-ink-body);
}

/* ── Payment method card ── */
.bpx-pay {
  display: flex;
  flex-direction: column;
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  padding: 26px 24px;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
  transition: border-color 0.18s, transform 0.18s;
}

.bpx-pay:hover {
  border-color: var(--bpx-accent);
  transform: translateY(-3px);
}

/* No plate or border around the mark: all three brand files have a white
   background baked in, so on the white card they already sit flush and a box
   would only draw an edge around nothing. Height is fixed and the width is
   left to follow, so each logo keeps its own proportions. */
.bpx-pay__logo {
  display: block;
  margin-bottom: 18px;
}

.bpx-pay__logo img {
  width: auto;
  height: 52px;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

.bpx-pay__name {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bpx-navy);
}

.bpx-pay__text {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bpx-ink-body);
  flex: 1 1 auto;
}

.bpx-pay__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.bpx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bpx-accent);
  background: var(--bpx-surface);
  border-radius: 999px;
  padding: 6px 13px;
}

/* ============================================================
   About
   ============================================================ */
.bpx-about {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: center;
}

@media (max-width: 900px) {
  .bpx-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

.bpx-about__body p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--bpx-ink-body);
}

.bpx-about__body .bpx-btn {
  margin-top: 26px;
}

.bpx-about__media img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--bpx-radius-lg);
}

/* ============================================================
   FAQ accordion
   ============================================================ */
/* Two columns. Each item is its own <details>, so a question opening in one
   column pushes only the items below it in that column — the grid does not
   need to reflow the other side. */
.bpx-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

@media (max-width: 768px) {
  .bpx-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bpx-faq__item {
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  padding: 18px 22px;
  transition: border-color 0.18s;
}

.bpx-faq__item[open] {
  border-color: var(--bpx-accent);
}

.bpx-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bpx-navy);
  list-style: none;
}

.bpx-faq__q::-webkit-details-marker {
  display: none;
}

/* Toggle sits at the right edge, where an accordion control is expected,
   rather than butted against the start of the question. */
.bpx-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bpx-surface);
  color: var(--bpx-accent);
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}

.bpx-faq__item[open] .bpx-faq__q::after {
  content: "\2212";
  background: var(--bpx-accent);
  color: var(--bpx-white);
}

.bpx-faq__a {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bpx-ink-body);
}

/* ============================================================
   Blog cards inside the homepage
   blog.css is not loaded on the front page, so the compact card it shares
   with the blog needs its geometry here too.
   ============================================================ */
.bpx-sec .bpx-postgrid {
  display: grid;
}

.bpx-sec .bpx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
  transition: border-color 0.18s, transform 0.18s;
}

.bpx-sec .bpx-card:hover {
  border-color: var(--bpx-accent);
  transform: translateY(-3px);
}

.bpx-sec .bpx-card__media {
  display: block;
  background: var(--bpx-surface);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.bpx-sec .bpx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.bpx-sec .bpx-card:hover .bpx-card__media img {
  transform: scale(1.04);
}

.bpx-sec .bpx-card__media--empty {
  display: grid;
  place-items: center;
  color: var(--bpx-accent);
  font-size: 30px;
  opacity: 0.45;
}

.bpx-sec .bpx-card__body {
  padding: 16px 18px;
}

.bpx-sec .bpx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--bpx-ink-muted);
}

.bpx-sec .bpx-meta__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.bpx-sec .bpx-meta__term {
  position: relative;
  z-index: 1;
  color: var(--bpx-accent);
  font-weight: 700;
  text-decoration: none;
}

.bpx-sec .bpx-card__title {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bpx-sec .bpx-card__title a {
  color: var(--bpx-navy);
  text-decoration: none;
  transition: color 0.15s;
}

.bpx-sec .bpx-card:hover .bpx-card__title a {
  color: var(--bpx-accent);
}

.bpx-sec .bpx-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}