/* ============================================================
   BEFORE YOU POP — FOUNDING LAUNCH VISUAL SYSTEM
   ------------------------------------------------------------
   Keeps the existing Home rail geometry intact and styles only the new
   Founding Launch content + optional uploaded artwork inside the icon area.
   ============================================================ */

:root {
  --bpf-pink: #ff2ec4;
  --bpf-pink-soft: #ff8fd8;
  --bpf-blue: #00e5ff;
  --bpf-purple: #a855ff;
  --bpf-gold: #ffd369;
  --bpf-white: #f8fbff;
  --bpf-dim: #aab2c0;
  --bpf-panel: rgba(10,12,19,.88);
  --bpf-line: rgba(255,255,255,.12);
}

.bpf-mount {
  width: min(1160px, calc(100% - 24px));
  margin: 30px auto 0;
}

.bpf-launch {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 54px);
  background:
    radial-gradient(circle at 14% 0%, rgba(255,46,196,.18), transparent 36%),
    radial-gradient(circle at 88% 8%, rgba(0,229,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(11,11,18,.98), rgba(3,4,8,.99));
  box-shadow: 0 32px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.025);
}

.bpf-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 10%, rgba(255,46,196,.025) 38%, rgba(0,229,255,.025) 70%, transparent 90%);
}

.bpf-kicker,
.bpf-mini-kicker,
.bpf-step,
.bpf-roadmap-title {
  position: relative;
  z-index: 1;
  font-family: Archivo, sans-serif;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bpf-kicker {
  color: var(--bpf-blue);
  font-size: clamp(11px, 1.5vw, 14px);
  margin-bottom: 12px;
}

.bpf-launch > h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: Archivo, sans-serif;
  font-size: clamp(34px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--bpf-white);
  text-shadow: 0 0 32px rgba(255,46,196,.18);
}

.bpf-lead {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 18px 0 24px;
  color: #ccd3df;
  font: 500 clamp(15px, 2vw, 19px)/1.6 'Space Grotesk', sans-serif;
}

.bpf-image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: #07080d;
  box-shadow: 0 20px 54px rgba(0,0,0,.38);
}

.bpf-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.bpf-image.hero {
  margin: 24px 0;
}

.bpf-image.product {
  margin-bottom: 14px;
}

.bpf-image.roadmap {
  margin-bottom: 14px;
}

.bpf-image.back {
  margin-top: 14px;
  opacity: .96;
}

.bpf-goal {
  position: relative;
  z-index: 1;
  margin: 24px 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}

.bpf-goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  font-family: Archivo, sans-serif;
}

.bpf-goal-top strong {
  color: var(--bpf-white);
  letter-spacing: .08em;
}

.bpf-goal-top span {
  color: var(--bpf-gold);
  font-weight: 900;
  font-size: 22px;
}

.bpf-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 14px rgba(0,0,0,.4);
}

.bpf-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bpf-pink), var(--bpf-purple), var(--bpf-blue));
  box-shadow: 0 0 20px rgba(0,229,255,.45);
}

.bpf-hook {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,46,196,.3);
  background: linear-gradient(90deg, rgba(255,46,196,.09), rgba(0,229,255,.05));
}

.bpf-hook strong {
  font: 900 clamp(20px, 3.2vw, 34px)/1 Archivo, sans-serif;
  color: var(--bpf-white);
}

.bpf-hook span {
  color: var(--bpf-pink-soft);
  font-weight: 700;
}

.bpf-live-now,
.bpf-host-card,
.bpf-roadmap,
.bpf-lifetime-note {
  position: relative;
  z-index: 1;
}

.bpf-live-now {
  margin: 28px 0;
}

.bpf-mini-kicker,
.bpf-roadmap-title,
.bpf-step {
  color: var(--bpf-blue);
  font-size: 11px;
}

.bpf-live-grid,
.bpf-roadmap-grid,
.bpf-host-grid,
.bpf-tier-grid {
  display: grid;
  gap: 16px;
}

.bpf-live-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.bpf-live-grid article,
.bpf-roadmap-grid article,
.bpf-host-grid > div {
  border: 1px solid var(--bpf-line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  padding: 18px;
}

.bpf-live-grid h3,
.bpf-roadmap-grid h3,
.bpf-host-card h3 {
  margin: 10px 0 7px;
  font-family: Archivo, sans-serif;
  color: var(--bpf-white);
}

.bpf-live-grid p,
.bpf-roadmap-grid p,
.bpf-host-card p,
.bpf-detail-copy p,
.bpf-lifetime-note p {
  margin: 0;
  color: #b8c0ce;
  line-height: 1.55;
}

.bpf-tier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.bpf-tier {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17,18,28,.96), rgba(7,8,13,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}

.bpf-tier.recommended {
  border-color: rgba(255,211,105,.7);
  box-shadow: 0 0 0 1px rgba(255,211,105,.18), 0 24px 60px rgba(255,46,196,.16);
}

.bpf-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe59c, #ffd369);
  color: #131313;
  font: 900 9px/1 Archivo, sans-serif;
  letter-spacing: .1em;
}

.bpf-badge {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  position: relative;
}

.bpf-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(0,229,255,.25));
}

.bpf-badge > span {
  display: none;
}

.bpf-badge.is-fallback {
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,46,196,.22), rgba(0,229,255,.18));
  border: 1px solid rgba(255,255,255,.18);
}

.bpf-badge.is-fallback > span {
  display: block;
  color: var(--bpf-white);
  font: 900 12px/1 Archivo, sans-serif;
  letter-spacing: .08em;
}

.bpf-tier-name {
  min-height: 38px;
  color: var(--bpf-white);
  font: 900 16px/1.2 Archivo, sans-serif;
  letter-spacing: .06em;
}

.bpf-price {
  margin: 12px 0 16px;
  color: var(--bpf-white);
  font: 900 36px/1 Archivo, sans-serif;
}

.bpf-price > span {
  color: var(--bpf-blue);
  font-size: 20px;
  vertical-align: top;
}

.bpf-price small {
  color: var(--bpf-dim);
  font: 600 12px/1 'Space Grotesk', sans-serif;
}

.bpf-tier ul {
  min-height: 142px;
  margin: 0 0 18px;
  padding-left: 18px;
  color: #c6ceda;
  line-height: 1.48;
}

.bpf-tier li + li {
  margin-top: 8px;
}

.bpf-tier-cta {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--bpf-pink), var(--bpf-purple), var(--bpf-blue));
  color: #05060a;
  font: 900 13px/1 Archivo, sans-serif;
  letter-spacing: .08em;
  box-shadow: 0 0 24px rgba(255,46,196,.2);
}

.bpf-stack-note,
.bpf-lifetime-note {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 16px;
  background: rgba(0,229,255,.035);
  color: #c7d0dc;
  line-height: 1.55;
}

.bpf-stack-note strong,
.bpf-lifetime-note > strong {
  color: var(--bpf-blue);
  font-family: Archivo, sans-serif;
  letter-spacing: .08em;
}

.bpf-host-card {
  margin-top: 34px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  border: 1px solid rgba(255,46,196,.28);
  background: linear-gradient(135deg, rgba(255,46,196,.06), rgba(0,229,255,.045));
}

.bpf-host-card h3 {
  font-size: clamp(24px, 4vw, 38px);
}

.bpf-host-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.bpf-host-grid strong,
.bpf-host-grid span {
  display: block;
}

.bpf-host-grid strong {
  color: var(--bpf-white);
  font: 900 13px/1.2 Archivo, sans-serif;
  letter-spacing: .06em;
}

.bpf-host-grid span {
  margin-top: 8px;
  color: #b8c0ce;
  line-height: 1.5;
}

.bpf-details {
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px;
}

.bpf-details summary {
  cursor: pointer;
  color: var(--bpf-blue);
  font-weight: 800;
}

.bpf-detail-copy {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.bpf-roadmap {
  margin-top: 36px;
}

.bpf-roadmap-title {
  margin-bottom: 14px;
}

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

.bpf-step {
  margin-top: 8px;
}

.bpf-close {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 34px;
  padding: 22px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(255,46,196,.08), rgba(168,85,255,.09), rgba(0,229,255,.08));
}

.bpf-close strong {
  color: var(--bpf-white);
  font: 900 clamp(24px, 4vw, 42px)/1 Archivo, sans-serif;
}

.bpf-close span {
  color: #c6ced8;
}

/* ============================================================
   HOME RAIL ART — FULL-CARD MARKETING ART
   ------------------------------------------------------------
   Admin uploads now become the CARD ART instead of tiny icon thumbnails.
   This preserves the repaired rail geometry and all existing click / swipe
   behavior while allowing each square campaign image to sell the feature.
   ============================================================ */
.bp-rail-card:has(.ic.has-bpf-art){
  overflow:hidden;
  isolation:isolate;
  justify-content:flex-end;
  padding-top:108px;
  background:#030407;
}

.bp-rail-card .ic.has-bpf-art{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  margin:0;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  filter:none;
  pointer-events:none;
}

.bp-rail-card .ic.has-bpf-art::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 28%,rgba(0,0,0,.54) 58%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.98) 100%),
    linear-gradient(90deg,rgba(0,0,0,.10),transparent 45%,rgba(0,0,0,.08));
}

.bpf-rail-thumb{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
  transform:scale(1.001);
  filter:saturate(1.04) contrast(1.03);
  transition:transform .38s ease,filter .38s ease;
}

/* The product-box image benefits from seeing the whole package instead of
   cropping its edges. The black card surface fills any tiny letterbox area. */
.bp-rail-card.growth .bpf-rail-thumb{
  object-fit:contain;
  background:#020307;
}

.bp-rail-card:has(.ic.has-bpf-art) h3,
.bp-rail-card:has(.ic.has-bpf-art) p,
.bp-rail-card:has(.ic.has-bpf-art) .go,
.bp-rail-card:has(.ic.has-bpf-art) .soon{
  position:relative;
  z-index:2;
}

.bp-rail-card:has(.ic.has-bpf-art) h3{
  margin-top:auto;
  color:#fff;
  text-shadow:0 2px 14px #000,0 0 18px rgba(0,0,0,.95);
}

.bp-rail-card:has(.ic.has-bpf-art) p{
  color:rgba(255,255,255,.88);
  text-shadow:0 2px 10px #000,0 0 14px #000;
}

.bp-rail-card:has(.ic.has-bpf-art) .go,
.bp-rail-card:has(.ic.has-bpf-art) .soon{
  text-shadow:0 2px 10px #000,0 0 14px #000,0 0 16px var(--accent-soft,transparent);
}

/* Keep the existing neon identity line above the artwork. */
.bp-rail-card:has(.ic.has-bpf-art)::before{
  z-index:3;
}

@media (hover:hover){
  .bp-rail-card.live:has(.ic.has-bpf-art):hover .bpf-rail-thumb{
    transform:scale(1.045);
    filter:saturate(1.12) contrast(1.06) brightness(1.05);
  }
}

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

@media (max-width: 640px) {
  .bpf-mount {
    width: min(100% - 14px, 1160px);
  }

  .bpf-launch {
    border-radius: 22px;
    padding: 22px 14px 28px;
  }

  .bpf-hook,
  .bpf-goal-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .bpf-live-grid,
  .bpf-host-grid,
  .bpf-roadmap-grid,
  .bpf-tier-grid {
    grid-template-columns: 1fr;
  }

  .bpf-tier ul {
    min-height: 0;
  }

  .bpf-price {
    font-size: 32px;
  }

  .bp-rail-card:has(.ic.has-bpf-art){
    padding-top:96px;
  }
}

/* ============================================================
   ROADMAP SPLIT — GAME BOX / RESOURCES / GAME SHOW
   ------------------------------------------------------------
   Give each launch milestone enough visual weight to feel intentional.
   Game Box lives inside WHAT'S NEXT with Wellness/Growth/Enjoyment.
   Game Show is a separate full-width feature. The final block returns
   visitors to the live Check Match experience.
   ============================================================ */
.bpf-roadmap{
  margin-top:48px;
}
.bpf-roadmap-title{
  margin-bottom:18px;
  font-size:13px;
  color:var(--bpf-blue);
}
.bpf-next-feature{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:26px;
  align-items:center;
  padding:clamp(20px,3vw,32px);
  border:1px solid rgba(0,229,255,.28);
  border-radius:26px;
  background:
    radial-gradient(circle at 85% 15%,rgba(0,229,255,.10),transparent 35%),
    radial-gradient(circle at 8% 90%,rgba(255,46,196,.09),transparent 38%),
    #04050a;
  box-shadow:0 24px 56px rgba(0,0,0,.34);
}
.bpf-next-copy h3,
.bpf-resource-intro h3,
.bpf-gameshow-copy h3{
  margin:8px 0 10px;
  font-family:Archivo,sans-serif;
  color:var(--bpf-white);
  letter-spacing:.02em;
}
.bpf-next-copy h3{font-size:clamp(28px,4vw,46px)}
.bpf-next-copy p,
.bpf-resource-intro p,
.bpf-gameshow-copy p{
  margin:0;
  color:#c8d0dc;
  line-height:1.58;
  font-size:15px;
}
.bpf-next-note{
  margin-top:10px!important;
  color:#9beeff!important;
}
.bpf-next-art{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.bpf-next-art .bpf-image{
  margin:0;
  min-height:0;
  border-radius:18px;
  background:#020307;
  border-color:rgba(255,255,255,.15);
}
.bpf-next-art .bpf-image img{
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#020307;
}
.bpf-resource-intro{
  margin:34px 0 16px;
  max-width:760px;
}
.bpf-resource-intro h3{font-size:clamp(24px,3vw,36px)}
.bpf-resource-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.bpf-resource-grid article{
  position:relative;
  overflow:hidden;
  min-height:180px;
  padding:22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.42));
}
.bpf-resource-grid article::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--resource-accent);
  box-shadow:0 0 18px var(--resource-accent);
}
.bpf-resource-grid article.wellness{--resource-accent:#ff2ec4}
.bpf-resource-grid article.growth{--resource-accent:#a855ff}
.bpf-resource-grid article.enjoyment{--resource-accent:#00e5ff}
.bpf-resource-grid article>span{
  color:var(--resource-accent);
  font:900 11px/1 Archivo,sans-serif;
  letter-spacing:.15em;
}
.bpf-resource-grid article h3{
  margin:16px 0 8px;
  color:#fff;
  font:900 18px/1.15 Archivo,sans-serif;
}
.bpf-resource-grid article p{
  margin:0;
  color:#bfc7d3;
  line-height:1.5;
}
.bpf-gameshow-feature{
  margin-top:52px;
  padding:clamp(22px,3vw,34px);
  border:1px solid rgba(255,46,196,.34);
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,46,196,.13),transparent 35%),
    radial-gradient(circle at 92% 90%,rgba(0,229,255,.12),transparent 36%),
    #030409;
  box-shadow:0 28px 70px rgba(0,0,0,.44),0 0 38px rgba(168,85,255,.07);
}
.bpf-gameshow-copy{
  max-width:850px;
  margin:0 auto 20px;
  text-align:center;
}
.bpf-gameshow-copy h3{
  font-size:clamp(30px,5vw,58px);
}
.bpf-gameshow-copy p+p{margin-top:10px}
.bpf-gameshow-copy strong{
  color:#fff;
  letter-spacing:.04em;
}
.bpf-image.gameshow{
  margin:0 auto;
  width:min(100%,920px);
  border-radius:24px;
  background:#020307;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px rgba(255,46,196,.10);
}
.bpf-image.gameshow img{
  width:100%;
  max-height:720px;
  object-fit:contain;
  background:#020307;
}
.bpf-try-match{
  margin-top:38px;
  padding:clamp(24px,4vw,42px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  border:1px solid rgba(0,229,255,.28);
  border-radius:24px;
  background:linear-gradient(115deg,rgba(255,46,196,.10),rgba(168,85,255,.08),rgba(0,229,255,.10));
}
.bpf-try-match>strong{
  color:#fff;
  font:900 clamp(28px,4.5vw,50px)/1 Archivo,sans-serif;
}
.bpf-try-match>span{
  color:#c8d0dc;
  font-size:16px;
  line-height:1.5;
  max-width:700px;
}
.bpf-try-match-btn{
  margin-top:10px;
  border:0;
  border-radius:999px;
  padding:15px 28px;
  cursor:pointer;
  background:linear-gradient(90deg,#ff2ec4,#a855ff,#00e5ff);
  color:#05060a;
  font:900 13px/1 Archivo,sans-serif;
  letter-spacing:.10em;
  box-shadow:0 0 28px rgba(255,46,196,.22),0 0 22px rgba(0,229,255,.12);
}
.bpf-try-match-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(255,46,196,.34),0 0 30px rgba(0,229,255,.20);
}

@media(max-width:820px){
  .bpf-next-feature{grid-template-columns:1fr}
  .bpf-next-copy{text-align:center}
  .bpf-resource-grid{grid-template-columns:1fr}
  .bpf-resource-grid article{min-height:0}
}
@media(max-width:560px){
  .bpf-next-art{grid-template-columns:1fr}
  .bpf-next-art .bpf-image img{aspect-ratio:auto;height:auto}
  .bpf-gameshow-feature{margin-top:34px;padding:18px 12px}
  .bpf-try-match{padding:24px 16px}
}