/* ============================================================
   Template 1: Brand Product — template-specific styles
   Layered on top of shared/css/base.css and shared/css/components.css
   ============================================================ */

/* ----- Deal banner — full-width sticky band, crimson gradient with
   abstract curved swooshes overlaid (Flash-sale-poster inspo, scaled
   down to a slim band). Hidden by default. */
.bp-deal-banner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 90;
  overflow: hidden;
  background: #FF3DA0;
  color: #fff;
}
body.is-promo-active .bp-deal-banner { display: block; }
/* (Decorative swooshes removed — flat black reads cleaner.) */
.bp-deal-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
/* Strikethrough on main-page CTA buttons when a promo is active.
   Toggled by JS that wraps the strike + new price in a nowrap pair so
   they never break to a second line. */
.cta-pricepair {
  white-space: nowrap;
  display: inline-block;
}
.cta-strike {
  text-decoration: line-through;
  opacity: 0.55;
  margin-right: 0;
  font-weight: 500;
  font-size: 0.85em;
}
/* Sticky bar is compact — keep strike tight so it doesn't swamp the CTA. */
.mobile-stickybar .cta-strike { font-size: 0.75em; }
.mobile-stickybar .cta-pricepair { letter-spacing: -0.005em; }

/* Darker purpley-pink heart — pops against the electric pink banner.
   Crimson would blend; this deeper berry tone sits proud. */
.bp-deal-banner__heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #A8005C;
  transform-origin: center;
  animation: bp-deal-heart 1.6s ease-in-out infinite;
}
@keyframes bp-deal-heart {
  0%, 100% { transform: scale(1);    }
  15%      { transform: scale(1.12); }
  30%      { transform: scale(1);    }
  45%      { transform: scale(1.08); }
  60%      { transform: scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .bp-deal-banner__heart { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-deal-banner__flame { animation: none; }
}
.bp-deal-banner__copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.2;
}
.bp-deal-banner__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bp-deal-banner__sep {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.bp-deal-banner__sub {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bp-deal-banner__inner { padding: 5px 12px; gap: 8px; }
  .bp-deal-banner__copy { gap: 6px; }
  .bp-deal-banner__title { font-size: 13px; }
  .bp-deal-banner__sep { font-size: 12px; }
  .bp-deal-banner__sub { font-size: 11px; letter-spacing: 0.10em; }
}

/* ----- Layout shells ----- */
.bp-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.bp-shell--narrow {
  max-width: 680px;
}

/* ----- Hero ----- */
.bp-hero {
  padding: 20px 0 30px;
  text-align: center;
}
.bp-hero__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.bp-hero__logo {
  height: 40px;
  width: auto;
}
@media (max-width: 720px) {
  .bp-hero__logo { height: 32px; }
}
/* Cover board grid (display: grid) is defined in shared/css/components.css.
   Only template-specific overrides go here. */
.bp-hero__ticker-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto 32px;
}
.bp-hero__ticker-stack {
  margin: 0 auto;
}
/* Floating "Listen to samples" jump button. Solid white pill centred on
   the cover board. Black label, red pulsing play icon. Solid background
   (no backdrop-filter) avoids the Safari/Chrome bug where a re-painted
   element with backdrop-filter loses its foreground content on scroll back. */
.bp-hero__sample-jump {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  background: #fff;
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
  will-change: transform;
}
.bp-hero__sample-jump:hover {
  animation: none;
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}
.bp-hero__sample-jump-icon {
  display: block;
  color: var(--crimson);
  transform-origin: center;
}
/* Whole-button gentle pulse — soft scale breathe, slow rhythm so it
   reads as a "tap me" hint rather than a noisy alert. */
.bp-hero__sample-jump {
  animation: bp-sample-jump-pulse 3.6s ease-in-out infinite;
}
@keyframes bp-sample-jump-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-hero__sample-jump { animation: none; }
}
.bp-hero__kicker {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 10px;
}
.bp-hero__h1 {
  font-family: 'Rubik', 'Source Serif 4', sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 720px;
  margin: 0 auto 12px;
  text-wrap: balance;          /* keeps the title to 2 evenly-balanced lines */
}
/* All-caps treatment for short, punchy variants — opt in via class */
.bp-hero__h1--allcaps {
  text-transform: uppercase;
  letter-spacing: -0.07em;
  word-spacing: 0.08em;
  line-height: 1.05;
}
.bp-hero__sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 22px;
}
.bp-hero__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.bp-hero__cta {
  font-size: 19px;
  padding: 20px 44px;
}
/* Guarantee text — plain black text under the CTA. Same treatment in
   the hero CTA wrap and the offer card so the page feels consistent. */
.bp-hero__cta-wrap .cta-sub,
.bp-offer .cta-sub {
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
.bp-hero__cta-wrap .cta-sub {
  margin-top: 0;
}

/* Mid-tier CTA sizing — Offer card runs 2px smaller than Final because
   the offer panel is narrower (matches the audio player width); the
   smaller font keeps the price + strike from feeling crushed. Final +
   sticky stay at the standardised mid-tier size. */
.bp-offer .cta--full {
  font-size: 15px;
  padding: 16px 22px;
}
.bp-final-cta .cta {
  font-size: 17px;
  padding: 18px 24px;
}
.mobile-stickybar .cta {
  font-size: 16px;
  padding: 14px 20px;
}

/* Lift the offer section 20px closer to the hero — tighter visual grouping
   between the hero CTA and the lifetime-access pricing panel. */
#offer { padding-top: 44px; }
@media (max-width: 640px) {
  #offer { padding-top: 28px; }
}

/* ----- Trust row (Dragon's Den, Emmy, etc.) ----- */
.bp-trust {
  margin: 0 auto;
  padding: 8px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ----- Section spacing ----- */
.bp-section {
  padding: 64px 0;
}
.bp-section--tight { padding: 40px 0; }
.bp-section__head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
/* Section kicker — crimson Poppins all-caps, mirrors the hero kicker style.
   Overrides the .kicker base styles that the HTML still inherits via class="kicker". */
.bp-section__kicker {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 12px;
}
/* Section H2 — Rubik Black all-caps in dark ink. Smaller than the hero H1.
   Crimson lives in the kicker above (the energy hit); H2 stays black for
   readability and to avoid colour overload across multiple sections. */
.bp-section__h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.bp-section__lede {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ----- Player zoom-in on scroll — keep it simple -----
   Player starts slightly scaled-down (reads as "further away") and
   gently zooms to full scale as the user scrolls into the section.
   No dark-mode flip, no full-width background expansion — just a
   subtle "comes into place" feel. Section stays cream throughout. */
.bp-player-section { padding: 32px 0 56px; background: rgba(255, 252, 248, 0.5); }
.bp-player-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px;
  transform: scale(0.7);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}
.bp-player-wrap.is-immersed {
  transform: scale(1);
}

/* Scroll-nudge — when the category tabs first come into view they do a soft,
   bouncy bob to subconsciously cue that the strip is scrollable. Fires once.
   Multiple keyframes with diminishing amplitude give the "spring settling" feel. */
@keyframes sb-scroll-nudge {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-34px); }
  42%  { transform: translateX(14px); }
  62%  { transform: translateX(-6px); }
  82%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.sb-player__tabs.is-nudging {
  /* Smooth ease-in-out between each keyframe — reads as a damped spring rather than a flick */
  animation: sb-scroll-nudge 1100ms cubic-bezier(0.45, 0, 0.55, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sb-player__tabs.is-nudging { animation: none; }
}

/* ----- Grows with your child — single composited PNG ----- */
.bp-devices-art {
  margin: 0 auto 32px;
  max-width: 720px;
  text-align: center;
}
.bp-devices-art__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ============================================================
   Slide-up checkout modal (UI MOCKUP — no real Stripe wiring yet)
   Two-step flow: email → payment methods.
   Branded summary persists across both steps. Add-on toggle updates total.
   ============================================================ */
.bp-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bp-checkout-modal.is-open { pointer-events: auto; opacity: 1; }
.bp-checkout-modal[hidden] { display: none; }
.bp-checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
}
.bp-checkout-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 90vh;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bp-checkout-modal.is-open .bp-checkout-modal__panel { transform: translateY(0); }
.bp-checkout-modal__handle {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  pointer-events: none;
}
.bp-checkout-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.bp-checkout-modal__close:hover { background: rgba(0, 0, 0, 0.12); }
.bp-checkout-modal__scroll {
  overflow-y: auto;
  padding: 26px 24px 32px;
  -webkit-overflow-scrolling: touch;
}

/* Discount banner — only visible when modal has .is-discounted class.
   Locked: cannot be removed by the user. Auto-applied for the promo window. */
.bp-checkout-discount {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: rgba(255, 14, 77, 0.08);
  border: 1px solid rgba(255, 14, 77, 0.18);
  border-radius: 12px;
}
.bp-checkout-modal.is-discounted .bp-checkout-discount { display: flex; }
.bp-checkout-discount__icon {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--crimson);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.bp-checkout-discount__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bp-checkout-discount__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--crimson);
}
.bp-checkout-discount__sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
}

/* (Line-item strike/active removed: the discount is shown via its own line
   row in the order summary + the strikethrough on the Total + Pay button.) */

/* Header — clean and trust-signally, no Rubik shouting */
.bp-checkout-summary {
  text-align: center;
  margin: 6px 0 18px;
}
/* Secure-checkout label sits at the top of the modal, centred, in black. */
.bp-checkout-securehead {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 24px;
}
.bp-checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.bp-checkout-secure svg,
.bp-checkout-secure__lock {
  color: var(--ink);
  flex: 0 0 auto;
  /* The padlock's shackle pulls its visual centre below the geometric one,
     so nudge up to align optically with the cap-line of the text. */
  margin-top: -2px;
}
.bp-checkout-secure__sep {
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 13px;
}
.bp-checkout-secure__powered {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.bp-checkout-secure__powered strong {
  font-weight: 700;
  color: var(--ink);
}
.bp-checkout-summary__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 8px 0 11px;
}
.bp-checkout-summary__lede {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 380px;
  line-height: 1.45;
}

/* Line items */
.bp-checkout-lines {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.bp-checkout-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--line);
}
.bp-checkout-line:last-child { border-bottom: 0; }
.bp-checkout-line__price {
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}
.bp-checkout-line__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bp-checkout-line__label {
  line-height: 1.2;
}
.bp-checkout-line__sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 10px;
  line-height: 1;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin-top: 2px;
}
/* Discount line — only visible when modal has .is-discounted class.
   No background tint to avoid an error-looking red wash; the saving is
   communicated by the negative price + the strike on the Total + Pay btn. */
.bp-checkout-line--discount {
  display: none;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  color: var(--ink-soft);
}
.bp-checkout-modal.is-discounted .bp-checkout-line--discount { display: flex; }
.bp-checkout-line__price--discount { color: var(--ink); font-weight: 600; }

/* Add-on card — sits between line items and total. Soft warm pink so it
   reads as an invitational extra, not part of the basket. Reserves green
   for confirmation states elsewhere. */
.bp-checkout-extra {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 11px;
  margin: 8px 0 14px;
  background: #FCEFE9;
  border: 1px solid rgba(216, 0, 63, 0.12);
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}
.bp-checkout-extra__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.bp-checkout-extra__price {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}
.bp-checkout-addon__check {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bp-checkout-addon__check:checked {
  border-color: var(--crimson);
  background: var(--crimson);
}
.bp-checkout-addon__check:checked::after {
  content: '';
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18 20 6.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.bp-checkout-addon__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-checkout-addon__sub {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-soft);
}
/* Addon price column removed — price now lives inline in the title text. */

/* Total — no dashed border (the lines container above already separates it) */
.bp-checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 22px;
  padding: 0 4px;
}
.bp-checkout-total__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bp-checkout-total__right {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.bp-checkout-total__amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.bp-checkout-total__strike {
  display: none;
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 15px;
  text-decoration: line-through;
}
.bp-checkout-modal.is-discounted .bp-checkout-total__strike { display: inline; }
.bp-checkout-modal.is-discounted .bp-checkout-total__active { color: var(--crimson); }
/* Strikethrough on the Pay button — only renders when modal has
   .is-discounted. Sits inline with a non-breaking space after it so the
   active price reads "[strike £97] £77" naturally. */
.bp-checkout-pay-strike {
  display: none;
  margin-right: 6px;
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.55;
  text-decoration: line-through;
}
.bp-checkout-modal.is-discounted .bp-checkout-pay-strike { display: inline; }
.bp-checkout-total__sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.005em;
}

/* Step containers */
.bp-checkout-step[hidden] { display: none; }

/* Email pill (step 2) */
.bp-checkout-emailpill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
}
.bp-checkout-emailpill__label {
  color: var(--ink-faint);
  flex: 0 0 auto;
}
.bp-checkout-emailpill__email {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-checkout-emailpill__edit {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--crimson);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 0 0 auto;
}

/* Field styling shared */
.bp-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}
.bp-checkout-field__label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bp-checkout-field input {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bp-checkout-field input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.10);
}
.bp-checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Card number field — input wrapper (icons now live on the method row, not here) */
.bp-checkout-card-input {
  position: relative;
  display: block;
}
.bp-cardicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 18px;
  border-radius: 3px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: -0.02em;
  border: 1px solid var(--line);
  background: #fff;
}
.bp-cardicon--visa {
  background: #1A1F71;
  color: #fff;
  border-color: #1A1F71;
  font-style: italic;
}
.bp-cardicon--mc {
  position: relative;
  padding: 0;
  background: #fff;
  font-size: 0;
}
.bp-cardicon__mc-red,
.bp-cardicon__mc-yellow {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.bp-cardicon__mc-red {
  left: 4px;
  background: #EB001B;
}
.bp-cardicon__mc-yellow {
  right: 4px;
  background: #F79E1B;
  mix-blend-mode: multiply;
}
.bp-cardicon--amex {
  background: #006FCF;
  color: #fff;
  border-color: #006FCF;
}

/* Submit / continue buttons */
.bp-checkout-submit {
  display: block;
  width: 100%;
  margin: 14px 0 10px;
  padding: 16px 22px;
  background: var(--crimson);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, transform 0.18s ease;
}
.bp-checkout-submit:hover {
  background: var(--crimson-dark);
  transform: translateY(-1px);
}
.bp-checkout-note {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 4px 0 0;
}

/* Section headings — supporting type, sit BELOW the product/addon names in
   the visual hierarchy (which are the dominant items). */
.bp-checkout-secthead {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 18px 0 8px;
}
.bp-checkout-secthead:first-of-type { margin-top: 6px; }
/* Microcopy under email field — softens the moment of typing email
   into a fresh checkout, tells the buyer what happens next. */
.bp-checkout-fieldhint {
  margin: 6px 2px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.3;
}

/* Email input wrap with the small Stripe Link hint icon on the right */
.bp-checkout-input-wrap {
  position: relative;
  display: block;
}
.bp-checkout-link-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.bp-checkout-link-hint span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* Payment method radio list (Stripe pattern) */
.bp-checkout-methods {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  margin: 0 0 16px;
}
.bp-method {
  display: grid;
  grid-template-columns: 22px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bp-method:last-child { border-bottom: 0; }
.bp-method[hidden] { display: none; }

/* Hide the native radio, draw our own */
.bp-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bp-method__radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c8c4ba;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  position: relative;
  transition: border-color 0.15s ease;
}
.bp-method input:checked ~ .bp-method__radio {
  border-color: var(--crimson);
  border-width: 5px;
}

.bp-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  border-radius: 4px;
  background: #f1ece1;
  color: var(--ink);
  flex: 0 0 auto;
}
.bp-method__icon--card {
  background: var(--ink);
  color: #fff;
}
.bp-method__icon--apple {
  background: #fff;
  border: 1px solid var(--line);
}
.bp-method__icon--google {
  background: transparent;
  width: auto;
}
.bp-method__icon--klarna {
  background: #FFB3C7;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #17120F;
  font-size: 14px;
}
.bp-method__klarna-mark { line-height: 1; }

.bp-method__label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bp-method__hint {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
}

/* Card brand icons on the right of the row */
.bp-method__brands {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  justify-self: end;
}

/* Inline expanding card form when Card row is selected */
.bp-method__expand {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bp-method input:checked ~ .bp-method__expand {
  max-height: 420px;
}
.bp-method__expand .bp-checkout-cardform {
  padding: 12px 0 4px;
}

/* Save info / Stripe Link checkbox */
.bp-checkout-saveinfo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.bp-checkout-saveinfo input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #fff;
  flex: 0 0 auto;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bp-checkout-saveinfo input[type="checkbox"]:checked {
  border-color: var(--crimson);
  background: var(--crimson);
}
.bp-checkout-saveinfo input[type="checkbox"]:checked::after {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18 20 6.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.bp-checkout-saveinfo__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-checkout-saveinfo__title {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.bp-checkout-saveinfo__sub {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* Pay button — full-width crimson pill, brand-aligned */
.bp-checkout-submit--pay {
  background: var(--crimson);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 18px 22px;
  margin: 8px 0 14px;
  width: 100%;
  text-align: center;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bp-checkout-submit--pay:hover {
  background: var(--crimson-dark);
}

/* Guarantee footer — replaces the Stripe footer for stronger trust at click moment */
.bp-checkout-guaranteefoot {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.bp-checkout-guaranteefoot svg {
  color: var(--crimson);
  flex: 0 0 auto;
}

/* Generic pay button base */
.bp-paybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 48px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bp-paybtn:hover { opacity: 0.92; transform: translateY(-1px); }

/* Apple Pay & Google Pay — black with logo + larger "Pay" text */
.bp-paybtn--apple,
.bp-paybtn--google {
  background: #000;
  color: #fff;
  gap: 6px;
}
.bp-paybtn__wallet-icon {
  flex: 0 0 auto;
}
.bp-paybtn__wallet-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Klarna — pink pill matching wallet button height, sits inline next to wallet */
.bp-paybtn--klarna {
  background: #FFB3C7;
  color: #17120F;
  font-size: 13px;
  font-weight: 600;
  gap: 5px;
}
.bp-paybtn__klarna-text { color: #17120F; }
.bp-paybtn__klarna-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.bp-paybtn__klarna-dot { color: #17120F; }

/* Or-pay-with-card divider */
.bp-checkout-divider {
  position: relative;
  text-align: center;
  margin: 18px 0 14px;
}
.bp-checkout-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.bp-checkout-divider span {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .bp-checkout-modal__panel { border-radius: 20px 20px 0 0; }
  .bp-checkout-modal__scroll { padding: 22px 18px 28px; }
  .bp-checkout-summary__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-checkout-modal,
  .bp-checkout-modal__panel { transition: none; }
}

/* ----- "Ask us anything" link below FAQ + slide-up support modal ----- */
.bp-faq-ask-line {
  text-align: center;
  margin: 36px 0 0;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.bp-faq-ask-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 2px;
  font: inherit;
  color: var(--crimson);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bp-faq-ask-link:hover { text-decoration-thickness: 2px; }

/* Slide-up modal */
.bp-ask-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bp-ask-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}
.bp-ask-modal[hidden] { display: none; }
.bp-ask-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
}
.bp-ask-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 28px 28px 32px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bp-ask-modal.is-open .bp-ask-modal__panel {
  transform: translateY(0);
}
.bp-ask-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.bp-ask-modal__close:hover { background: rgba(0, 0, 0, 0.06); }
.bp-ask-modal__head {
  text-align: center;
  margin: 4px 0 22px;
}
.bp-ask-modal__title {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 8px;
}
.bp-ask-modal__sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 auto;
  max-width: 360px;
}
.bp-ask-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bp-ask-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-ask-form__label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.bp-ask-form input[type="text"],
.bp-ask-form input[type="email"],
.bp-ask-form textarea {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--ink);
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  resize: vertical;
}
.bp-ask-form input:focus,
.bp-ask-form textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.10);
}
.bp-ask-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}
.bp-ask-form__submit {
  margin-top: 6px;
  padding: 14px 22px;
  background: var(--crimson);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, transform 0.18s ease;
}
.bp-ask-form__submit:hover {
  background: var(--crimson-dark);
  transform: translateY(-1px);
}
.bp-ask-modal__success {
  text-align: center;
  padding: 28px 8px 12px;
}
.bp-ask-modal__success-title {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.bp-ask-modal__success-sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 640px) {
  .bp-ask-modal__panel {
    padding: 24px 20px 28px;
    border-radius: 20px 20px 0 0;
  }
  .bp-ask-modal__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-ask-modal,
  .bp-ask-modal__panel { transition: none; }
}

/* ----- FAQ — narrower than the section default for an easier read.
   Larger horizontal padding so the questions don't run to the screen
   edges. Compound selector (.bp-shell.bp-faq-shell) outranks the plain
   .bp-shell mobile rule defined later in the file. */
.bp-shell.bp-faq-shell {
  max-width: 580px;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 640px) {
  .bp-shell.bp-faq-shell {
    padding-left: 36px;
    padding-right: 36px;
  }
}

/* ----- App features — 2-column tick list of short practical features ----- */
.bp-app-features {
  list-style: none;
  padding: 0;
  margin: 8px auto 0;
  max-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
}
.bp-app-features li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.bp-app-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF0E4D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18 20 6.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 640px) {
  /* Stays 2-column on mobile, narrower max-width so the grid feels neat
     instead of stretching the full screen width. */
  .bp-app-features { gap: 10px 14px; max-width: 280px; }
  .bp-app-features li { font-size: 14px; padding-left: 24px; }
  .bp-app-features li::before { width: 16px; height: 16px; top: 4px; }
}
.bp-devices-label {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.02em;
}
.bp-devices-label strong { color: var(--ink); font-weight: 600; }


/* ----- Meet our characters — horizontal scroll carousel ----- */
.bp-characters-section {
  padding-bottom: 72px;
}
.bp-characters-scroll {
  display: flex;
  gap: 70px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px 36px 28px;
  scrollbar-width: none;
  /* Soft edge fade to cue scrollability without harsh edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.bp-characters-scroll::-webkit-scrollbar { display: none; }
.bp-character {
  flex: 0 0 auto;
  width: 336px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Geometry mirrors the existing brand LP: cover art floats above and over a
   coloured backing panel, so the character "stands on" the colour block. */
.bp-character__art-block {
  position: relative;
  width: 100%;
  aspect-ratio: 308 / 323;
}
.bp-character__panel {
  position: absolute;
  bottom: 0;
  left: 10.4%;
  width: 78.9%;
  height: 82.4%;
  border-radius: 20px;
  box-shadow: -3px 4px 8px rgba(0, 0, 0, 0.22);
  z-index: 1;
}
.bp-character__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 81.7%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 2;
}
/* Preview/Trailer button — sits absolute at the bottom of the art block,
   over the colour panel. White pill with crimson stroke, crimson play
   disc on the left, "Trailer" label on the right. Mirrors the existing
   brand LP's character carousel button. */
.bp-character__trailer {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 0;
  background: #fff;
  border: 2px solid var(--crimson);
  border-radius: 999px;
  height: 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bp-character__trailer:hover {
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.14);
}
.bp-character__trailer-icon {
  width: 26px;
  height: 26px;
  margin-left: -1px;
  border-radius: 999px;
  background: var(--crimson);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.bp-character__trailer-label {
  letter-spacing: -0.005em;
}
.bp-character__meta {
  text-align: center;
  padding: 0 6px;
}
.bp-character__teaser {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}

/* ----- Testimonials ----- */
.bp-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.bp-testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bp-testimonial__quote {
  font-family: 'Source Serif 4', serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
.bp-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bp-testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #E6D9C2;
  flex-shrink: 0;
  overflow: hidden;
}
.bp-testimonial__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bp-testimonial__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.bp-testimonial__role {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 2px 0 0;
}

/* ----- Offer card ----- */
/* Tumbling covers now live in the testimonials section. Section needs
   relative positioning + overflow clip so they stay in their own band. */
#testimonials { position: relative; padding-top: 0; }
@media (max-width: 720px) {
  #testimonials { padding-top: 0; }
}
/* Flying brand illustration above testimonials head — soft, decorative */
.bp-testimonials__hero-gif {
  display: block;
  margin: -40px auto 18px;
  width: 330px;
  max-width: 85%;
  height: auto;
  position: relative;
  z-index: 2;
}
@media (min-width: 720px) {
  .bp-testimonials__hero-gif { width: 420px; max-width: 480px; margin: -64px auto 24px; }
}
.bp-offer {
  max-width: 520px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 44px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  transform: scale(0.7);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}
.bp-offer.is-immersed {
  transform: scale(1);
}
/* Offer card heading — same Rubik Black all-caps system as the section H2s,
   slightly smaller because it lives inside a card not as a section anchor. */
.bp-offer__h3 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.bp-offer__price-note {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 24px;
}
.bp-offer__features {
  list-style: none;
  padding: 0;
  margin: 24px 20px 32px;
  text-align: left;
}
.bp-offer__features li {
  padding: 10px 0 10px 26px;
  position: relative;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.bp-offer__features li:last-child { border-bottom: 0; }
.bp-offer__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF0E4D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18 20 6.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ----- Final crimson CTA section ----- */
.bp-final-cta {
  background: var(--crimson);
  color: #fff;
  padding: 80px 20px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Cover ticker — sits at the bottom of the CTA section, peeks up from
   below. Bottom 5% of each cover is clipped by the section's overflow
   so the rounded tops feel like they're poking out. Continuous left
   scroll; doubled set in HTML keeps the loop seamless. */
.bp-final-cta__ticker {
  position: relative;
  /* Break out of the section's horizontal padding so the ticker spans
     edge-to-edge of the viewport on mobile (no crimson gap left/right). */
  width: calc(100% + 40px);
  margin-left: -20px;
  /* Tall enough that the upward box-shadow on each cover has room to
     extend without being clipped at the ticker's top edge. */
  height: 280px;
  margin-top: 36px;
  /* Negative margin pushes the ticker 11px below the section's bottom
     edge so the section's overflow:hidden clips the bottom 5% of each
     cover (rounded tops poke up; bottoms hidden). */
  margin-bottom: -11px;
  overflow: hidden;
  pointer-events: none;
}
/* Desktop: soft fade at both edges so covers ease off-screen.
   Mobile keeps a hard horizontal clip via overflow only. */
@media (min-width: 721px) {
  .bp-final-cta__ticker {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}
.bp-final-cta__ticker-track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  gap: 12px;
  width: max-content;
  animation: bp-final-ticker 60s linear infinite;
  will-change: transform;
}
.bp-final-cta__cover {
  flex: 0 0 auto;
  width: 175px;
  aspect-ratio: 1000 / 1333;
  border-radius: 10px 10px 0 0;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.22);
  /* video element styling — fill the box, crop to cover, no controls */
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}
@keyframes bp-final-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-final-cta__ticker-track { animation: none; }
}
/* Final crimson CTA H2 — matches the hero H1's Rubik Black system for
   visual end-cap symmetry. Sub copy removed; the H2 stands alone above
   the button + guarantee. */
.bp-final-cta__h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 720px;
  margin: 0 auto 28px;
  text-wrap: balance;
}
/* Wider button — extra horizontal padding for breathing room. */
.bp-final-cta__btn,
.bp-final-cta .cta {
  padding: 18px 56px;
}
.bp-final-cta .cta {
  background: #fff;
  color: var(--crimson);
}
.bp-final-cta .cta:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--crimson-dark);
}
.bp-final-cta .cta-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 16px;
}

/* ----- Mobile breakpoints ----- */
@media (max-width: 640px) {
  .bp-shell { padding: 0 16px; }
  .bp-hero { padding: 16px 0 30px; }
  .bp-hero__brand { margin-bottom: 6px; }
  .bp-hero__logo { height: 32px; }
  .bp-hero__ticker-wrap { margin-bottom: 24px; }
  .bp-hero__h1 { font-size: 30px; line-height: 1.05; margin-bottom: 10px; letter-spacing: -0.01em; }
  .bp-hero__sub { font-size: 17px; margin-bottom: 18px; }
  .bp-hero__cta { width: 100%; max-width: 440px; padding: 17px 18px; font-size: 16.5px; text-align: center; }
  .bp-hero__cta .cta-strike { font-size: 0.8em; }
  .bp-offer .cta--full { font-size: 14px; padding: 14px 16px; max-width: 420px; }
  .bp-final-cta .cta { font-size: 16px; padding: 16px 18px; max-width: 440px; }

  .bp-section { padding: 48px 0; }
  .bp-player-section { padding: 32px 0 48px; }
  .bp-section__h2 { font-size: 26px; letter-spacing: -0.025em; }
  .bp-section__lede { font-size: 15px; }

  .bp-devices {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 4px;
  }
  .bp-device { max-width: none; }
  .bp-device--centre { transform: translateY(-10px); }
  .bp-device--left { transform: rotateY(-18deg) translateY(0); }
  .bp-device--right { transform: rotateY(18deg) translateY(0); }

  .bp-included { grid-template-columns: 1fr; gap: 10px; }
  .bp-included li { font-size: 16px; }
  .bp-characters-scroll {
    padding: 12px 16px 18px;
    gap: 50px;
    /* Clean edge on mobile — no fade, cards run straight off the side */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .bp-character { width: 240px; }
  .bp-offer-cover { width: 60px; }
  .bp-character__name { font-size: 13px; }
  .bp-character__tagline { font-size: 12px; }
  /* Mobile panel width alignment — white panels (offer / founders /
     testimonials) narrowed by ~10px total; audio panel widened by
     ~10px total via reduced wrap padding. */
  .bp-testimonials { grid-template-columns: 1fr; max-width: calc(100% - 10px); margin-left: auto; margin-right: auto; }

  .bp-offer { padding: 32px 24px; border-radius: 20px; margin: 0 5px; }
  .bp-offer__h3 { font-size: 24px; }
  .bp-player-wrap { padding: 0 10px; }

  .bp-final-cta { padding: 56px 20px 0; }
  .bp-final-cta__h2 { font-size: 30px; line-height: 1.05; margin-bottom: 22px; }
  .bp-final-cta__btn,
  .bp-final-cta .cta { padding: 16px 36px; }
  .bp-final-cta__ticker { margin-top: 28px; margin-bottom: -8px; height: 210px; }
  .bp-final-cta__cover { width: 125px; }
}

/* ============================================================
   FOOTER — slim black band: links row, copyright stacked below
   ============================================================ */
.bp-footer {
  background: #000;
  color: #fff;
  padding: 14px 20px 8px;
  text-align: center;
}
.bp-footer__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bp-footer__nav {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.bp-footer__nav a {
  color: rgba(255,255,255,0.78);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.bp-footer__nav a:hover {
  color: #fff;
}
.bp-footer__legal {
  margin: 0;
  color: rgba(255,255,255,0.45);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
}
/* Mobile footer — symmetric slim padding. The sticky CTA bar's overlap
   is already handled by body.has-sticky-bar (in shared/css/components.css)
   which adds 82px to the body bottom when the bar is visible. */
@media (max-width: 720px) {
  .bp-footer { padding: 12px 20px; }
}

/* ============================================================
   FOUNDERS — humanise the brand. Whole section sits in a white
   card on the cream page background, matching the testimonial
   card treatment so the page reads as one consistent system.
   ============================================================ */
.bp-founders-section { padding-top: 16px; }
@media (max-width: 720px) {
  .bp-founders-section { padding-top: 8px; }
}
.bp-founders {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 48px;
  transform: scale(0.7);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}
.bp-founders.is-immersed {
  transform: scale(1);
}
.bp-founders__photo-wrap {
  width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
}
.bp-founders__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bp-founders__body .bp-section__kicker {
  margin: 0 0 8px;
}
.bp-founders__h2 {
  font-size: 28px;
  margin: 0 0 14px;
  line-height: 1.15;
  text-wrap: balance;
}
.bp-founders__copy {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 20px;
}
.bp-founders__copy p {
  margin: 0 0 14px;
}
.bp-founders__copy p:last-child {
  margin-bottom: 0;
}
.bp-founders__signoff {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 720px) {
  .bp-founders {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    max-width: calc(100% - 10px);
    margin-left: auto;
    margin-right: auto;
    padding: 28px 22px;
    border-radius: 20px;
  }
  .bp-founders__photo-wrap {
    width: 80%;
    aspect-ratio: 5 / 3;
    margin: 0 auto;
    border-radius: 18px;
  }
  .bp-founders__h2 { font-size: 26px; }
  .bp-founders__copy { font-size: 17px; }
}

/* Dragons' Den proof line under the hero wordmark — small caps Poppins,
   sits below the italic strapline as a separate conversion-focused
   proof signal. Subtle gold accent on the "5" pulls the eye. */
.bp-hero__dragons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
}
.bp-hero__dragons-flame {
  color: #E25822;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   TRUST STRIP — 4 stat badges between hero and offer panel.
   Inline tickrow with subtle borders, neutral cream chip.
   Stacks 2x2 on mobile so labels stay readable.
   ============================================================ */
.bp-trust {
  padding: 8px 0 4px;
}
.trust-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.trust-row__icon {
  width: 16px;
  height: 16px;
  color: var(--crimson);
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .bp-trust { padding: 4px 0 0; }
  .trust-row { gap: 8px 18px; padding: 0 12px; }
  .trust-row__item { font-size: 12px; gap: 6px; }
  .trust-row__icon { width: 14px; height: 14px; }
}

/* ============================================================
   BLOBBO HELP PANEL — secondary "got any questions?" CTA.
   Layered composition: Blobbo body stays stationary; the panel +
   arm sit on top and sway gently together so it reads like he's
   holding the sign up. Text inside the panel rides with the
   panel motion (no separate jiggle). Arm has a slightly different
   timing so it feels alive rather than rigid.
   ============================================================ */
.bp-blobbo {
  padding: 0 20px 24px;
  margin-top: -64px;
  text-align: center;
}
.bp-blobbo__stage {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  /* Body lifts up into the panel area — less empty space below */
  padding-bottom: 80px;
  transform: scale(0.7);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
  /* GPU-promote so the scale transform doesn't soften the rasterised
     content (PNGs + borders go grainy without this). */
  will-change: transform;
  backface-visibility: hidden;
}
.bp-blobbo__stage.is-immersed {
  transform: scale(1);
}
/* Stationary body — peeks out from the bottom centre, lifted up so
   more of the body sits behind the panel and the back hand is hidden. */
.bp-blobbo__body {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
/* Panel + arm sway as ONE unit — arm is locked to the panel motion
   so it reads like Blobbo is holding the board, not waving it around. */
.bp-blobbo__group {
  position: relative;
  z-index: 2;
  transform-origin: 50% 90%;
  animation: bp-blobbo-sway 5.6s ease-in-out infinite;
}
@keyframes bp-blobbo-sway {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1deg)  translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-blobbo__group { animation: none; }
}
.bp-blobbo__panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 32px 28px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}
.bp-blobbo__h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.bp-blobbo__copy {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 320px;
  margin: 0 auto 22px;
}
/* Secondary CTA — pill, dark text on white with subtle border.
   Deliberately not crimson so it reads as a quieter alternative. */
.bp-blobbo__cta {
  display: inline-block;
  padding: 14px 28px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.bp-blobbo__cta:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
/* Arm — same position as before (inside panel group), but with its
   transform-origin pinned to its own bottom-centre (the shoulder joint).
   A separate pivot animation rocks the top of the arm; the bottom stays
   anchored. Resting lean +1deg clockwise so it appears slightly tipped
   back. The panel group's gentle sway runs underneath, but because the
   arm's pivot is at the same vertical zone as the group's pivot, the
   shoulder barely drifts — only the arm's tip rocks visibly. */
.bp-blobbo__arm {
  position: absolute;
  width: 48px;
  height: auto;
  bottom: -34px;
  right: calc(28% + 47px);
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: bp-blobbo-arm-wave 5.6s ease-in-out infinite;
}
@keyframes bp-blobbo-arm-wave {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(4deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .bp-blobbo__arm { animation: none; transform: rotate(1deg); }
}
@media (max-width: 720px) {
  .bp-blobbo { padding: 0 16px 16px; margin-top: -68px; }
  .bp-blobbo__stage { padding-bottom: 64px; }
  .bp-blobbo__body { width: 170px; bottom: 4px; }
  .bp-blobbo__panel { padding: 26px 22px 22px; border-radius: 18px; }
  .bp-blobbo__h2 { font-size: 20px; }
  .bp-blobbo__copy { font-size: 14px; }
  .bp-blobbo__arm { width: 38px; bottom: -26px; right: calc(26% + 37px); }
}

/* ============================================================
   Stripe Payment Element — v1 embedded checkout
   Only rules added below. Do not refactor existing checkout
   styles above; Simon iterates on those in parallel.
   ============================================================ */
.bp-checkout-payment-element {
  margin: 8px 0 18px;
  min-height: 400px; /* prevents layout jump while Stripe mounts */
  position: relative;
}

/* While the element is loading, show a soft pulsing placeholder.
   Stripe replaces innerHTML on mount, so this only ever shows
   pre-mount or during a re-mount. */
.bp-checkout-payment-element:empty::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06), rgba(0,0,0,0.03));
  background-size: 200% 100%;
  animation: bp-pe-pulse 1.4s ease-in-out infinite;
}
@keyframes bp-pe-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Inline error/decline message under the Pay button. */
.bp-checkout-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 14, 77, 0.08);
  color: var(--crimson-dark);
  font-size: 14px;
  line-height: 1.4;
}

/* Disabled Pay button while Element is initialising or processing. */
.bp-checkout-submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Processing state — block clicks on backdrop / close so a 3DS
   challenge isn't dismissed accidentally. */
.bp-checkout-modal.is-processing .bp-checkout-modal__backdrop,
.bp-checkout-modal.is-processing .bp-checkout-modal__close {
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================================
   SAMPLE PANELS (v2) — three colour-tinted category showcases
   that replace the tabbed dark player. Each panel has its own
   cover carousel + play state. Single shared audio element.
   ============================================================ */
.bp-samples-section {
  padding: 0;
  background: var(--cream);
}
.bp-sample-panel {
  position: relative;
  overflow: hidden;
  padding: 56px 20px 64px;
  text-align: center;
  isolation: isolate;
}
/* Animated background tint layer — sits behind content, picks up the
   active cover's category colour. Smooth fade between covers. */
.bp-sample-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-tint, #fff);
  transition: background-color 0.6s ease;
}
/* Per-panel default tints (at-rest, before JS picks up). JS overrides
   directly on the .bg element. BOLD + vivid per Simon's brief —
   pastels read too soft. */
.bp-sample-panel--originals       .bp-sample-panel__bg { background: #FF8C1A; }
.bp-sample-panel--fairy-tales     .bp-sample-panel__bg { background: #C41E3A; }
.bp-sample-panel--nursery-rhymes  .bp-sample-panel__bg { background: #F5B40C; }
/* On bold tints the text flips white for contrast. */
.bp-sample-panel__h3,
.bp-sample-panel__count,
.bp-sample-panel__title { color: #fff; }
/* prev/next buttons sit on the bold tint — soft white pill. */
.bp-sample-panel__ctrl {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.bp-sample-panel__ctrl:hover { background: rgba(255, 255, 255, 0.30); }
.bp-sample-panel__shell {
  max-width: 520px;
  margin: 0 auto;
}
.bp-sample-panel__h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.bp-sample-panel__count {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 28px;
}
/* Carousel — horizontal cover-flow, similar to the legacy player but
   per-panel. Active cover is centered, larger; siblings flank it.  */
.bp-sample-panel__carousel {
  position: relative;
  width: 100%;
  height: 280px;
  margin-bottom: 24px;
  touch-action: pan-y;
}
.bp-sample-panel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}
.bp-sample-panel__card:focus { outline: none; }
.bp-sample-panel__card-cover {
  aspect-ratio: 1000 / 1333;
  border-radius: 12px;
  overflow: hidden;
  background: #2A2A2C;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.bp-sample-panel__card-cover img,
.bp-sample-panel__card-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Progress + slug — the playing story's title sits on a thin pill that
   fills as the audio plays. Same pattern as the previous tabbed player. */
.bp-sample-panel__progress {
  position: relative;
  max-width: 320px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.bp-sample-panel__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.32);
  transition: width 0.18s linear;
  pointer-events: none;
}
.bp-sample-panel__title {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  height: 42px;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
.bp-sample-panel__controls {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.bp-sample-panel__ctrl,
.bp-sample-panel__play {
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp-sample-panel__ctrl {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.bp-sample-panel__ctrl:hover { background: rgba(255, 255, 255, 0.30); }
.bp-sample-panel__ctrl svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}
.bp-sample-panel__play {
  width: 76px;
  height: 76px;
  background: var(--crimson);
  color: #fff;
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.bp-sample-panel__play:hover { background: var(--crimson-dark); }
.bp-sample-panel__play::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.bp-sample-panel__play.is-playing::before {
  border: 0;
  width: 17px;
  height: 17px;
  margin-left: 0;
  background-image: linear-gradient(to right, #fff 0 5px, transparent 5px 12px, #fff 12px 17px);
}
.bp-sample-panel__ctrl:hover,
.bp-sample-panel__play:hover {
  transform: scale(1.05);
}
@media (max-width: 720px) {
  .bp-sample-panel { padding: 44px 16px 52px; }
  .bp-sample-panel__h3 { font-size: 30px; }
  .bp-sample-panel__count { font-size: 11px; margin-bottom: 22px; }
  .bp-sample-panel__carousel { height: 250px; }
  .bp-sample-panel__card { width: 160px; }
}