/* Component CSS lifted verbatim from the Bits&Pieces Design System
   (components/core/Button.jsx, Badge.jsx, Logo.jsx, components/product/PlayButton.jsx).
   Reproduced here as plain CSS since this page runs outside the DC/React runtime. */

.bp-btn{
  --_bg: var(--punch-500); --_fg: var(--text-onaccent); --_bd: transparent; --_shadow: none;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-weight:var(--fw-bold); letter-spacing:-0.01em;
  border:var(--bw) solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  box-shadow:var(--_shadow); transition:var(--transition-button); text-decoration:none;
  line-height:1;
}
.bp-btn:hover{ transform:translateY(-1px) scale(1.015); }
.bp-btn:active{ transform:translateY(0) scale(0.97); }
.bp-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--focus-ring); }
.bp-btn[disabled]{ opacity:.45; pointer-events:none; }

.bp-btn--md{ height:44px; padding:0 22px; font-size:var(--fs-sm); }
.bp-btn--lg{ height:54px; padding:0 30px; font-size:var(--fs-body); }
.bp-btn--sm{ height:34px; padding:0 16px; font-size:var(--fs-xs); }

.bp-btn--primary{ --_bg:var(--punch-500); --_fg:#fff; --_shadow:var(--glow-punch); }
.bp-btn--primary:hover{ --_bg:var(--punch-400); }
.bp-btn--primary:active{ --_bg:var(--punch-600); }

.bp-btn--gold{ --_bg:var(--spotlight-500); --_fg:#1A1206; --_shadow:var(--glow-spotlight); }
.bp-btn--gold:hover{ --_bg:var(--spotlight-400); }

.bp-btn--gradient{ --_bg:var(--grad-brand); --_fg:#fff; --_shadow:var(--glow-punch); }

.bp-btn--secondary{ --_bg:var(--surface-2); --_fg:var(--text-primary); --_bd:var(--border-strong); }
.bp-btn--secondary:hover{ --_bg:var(--surface-3); }

.bp-btn--ghost{ --_bg:transparent; --_fg:var(--text-primary); --_bd:transparent; }
.bp-btn--ghost:hover{ --_bg:rgba(255,255,255,0.07); }

.bp-btn--block{ display:flex; width:100%; }

.bp-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-body); font-weight:var(--fw-bold);
  font-size:var(--fs-overline); letter-spacing:var(--ls-overline); text-transform:uppercase;
  padding:.4em .7em; border-radius:var(--radius-pill); line-height:1;
  border:var(--bw) solid transparent;
}
.bp-badge--solid{ background:var(--punch-500); color:#fff; }
.bp-badge--gold{ background:var(--spotlight-500); color:#1A1206; }
.bp-badge--live{ background:var(--danger-500); color:#fff; }
.bp-badge--free{ background:var(--success-500); color:#06241A; }
.bp-badge--soft{ background:rgba(255,31,107,0.14); color:var(--punch-300); border-color:rgba(255,31,107,0.3); }
.bp-badge--neutral{ background:var(--surface-3); color:var(--text-secondary); border-color:var(--border); }
.bp-badge__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }

.bp-logo{ display:inline-flex; align-items:center; gap:.5em; line-height:1; user-select:none; }
.bp-logo__mark{ display:block; flex:none; }
.bp-logo__word{
  font-family:var(--font-display); font-weight:var(--fw-bold); letter-spacing:var(--ls-display);
  color:var(--text-primary); white-space:nowrap;
}
.bp-logo__amp{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.bp-play{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  border-radius:50%; cursor:pointer; border:none; color:#fff;
  transition:var(--transition-button);
}
.bp-play:hover{ transform:scale(1.08); }
.bp-play:active{ transform:scale(0.94); }
.bp-play--solid{ background:var(--punch-500); box-shadow:var(--glow-punch); }
.bp-play--solid:hover{ background:var(--punch-400); }
.bp-play--gradient{ background:var(--grad-brand); box-shadow:var(--glow-punch); }
.bp-play--glass{ background:var(--glass-fill); backdrop-filter:blur(var(--blur-sm)); -webkit-backdrop-filter:blur(var(--blur-sm)); border:var(--bw) solid var(--glass-border); }
.bp-play--sm{ width:40px; height:40px; }
.bp-play--md{ width:56px; height:56px; }
.bp-play--lg{ width:76px; height:76px; }
.bp-play__glyph{ margin-left:8%; }