/* ============================================================
   BYP HOMEPAGE — 5-CARD RAIL + "NEW? START HERE" FUNNEL
   ------------------------------------------------------------
   Uses ONLY the approved palette variables already defined in
   styles-entry.css (BLACK / WHITE / BLUE / ELECTRIC BLUE / PINK /
   ELECTRIC PINK / PURPLE). There is deliberately NO NAVY, no green,
   no lime, no orange, no yellow, no gold, no brown and no random teal.

   Nothing here redefines the Home hero. The rail reuses the existing
   .main-card visual language (rims, glow, sheen) so the new cards look
   like they always belonged.
   ============================================================ */

/* ============================================================
   0. PAGE-WIDTH CONTAINMENT
   ------------------------------------------------------------
   The Home's ambient light field (.hero-aura in styles-entry.css) is
   deliberately wider than the viewport so its glow dissolves off-screen.
   It is pure decoration, so the page must CLIP it rather than let it create
   a horizontal scrollbar. This clips overflow only — it does not change any
   colour, size or position of the approved hero.
   ============================================================ */
html,body{overflow-x:hidden;max-width:100%}
#entryView{overflow-x:clip}   /* clip (not hidden) so the glow still bleeds */
@supports not (overflow-x:clip){ #entryView{overflow-x:hidden} }

/* ============================================================
   1. THE RAIL
   ------------------------------------------------------------
   Mobile: a smooth horizontal rail — finger swipe, free momentum
   and the next card peeking. No whole-page horizontal overflow.
   Desktop: trackpad horizontal movement + mouse drag with scroll snap.
   NO autoplay, and no giant oversized desktop tiles.
   ============================================================ */

/* The rail REPLACES the old two-card grid. It must never be laid out as a
   grid track (that inherited minmax(240px,1fr) and overflowed a phone), so
   the mount is a full-width block and any legacy .main-cards wrapper inside
   it is neutralised. */
#bpRailMount{display:block;width:100%;max-width:100%;min-width:0}
#bpRailMount .main-cards{display:block;width:100%;max-width:100%;margin:0}
#bpRailMount .main-cards>.main-card{display:none}   /* superseded by the rail */

.bp-rail-wrap{position:relative;display:block;width:100%;max-width:100%;min-width:0;margin:0 0 4px}
.bp-rail{
  display:flex;gap:16px;
  width:100%;max-width:100%;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  /* The rail owns its own scroll — the PAGE never scrolls sideways. */
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  padding:6px 4px 18px;
  scrollbar-width:none;-ms-overflow-style:none;
  /* ------------------------------------------------------------
     SNAP GEOMETRY (a previous "stops between cards" bug)
     ------------------------------------------------------------
     A scroll-snap-aligned item must be able to reach the scrollport's snap
     edge EXACTLY. With a padded rail and no scroll-padding, the engine snapped
     against the PADDING box. scroll-padding insets the snap edge by the SAME
     gutter as the padding. This applies to DESKTOP (mouse drag / trackpad),
     where snapping is wanted; see the mobile override below. */
  scroll-padding-inline:4px;
  scroll-padding-left:4px;
}
.bp-rail::-webkit-scrollbar{display:none}
.bp-rail-arrow{
  position:absolute;top:50%;z-index:6;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(124,233,255,.38);
  background:rgba(0,0,0,.82);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:900;line-height:1;
  box-shadow:0 0 16px rgba(0,229,255,.12);
  cursor:pointer;
}
.bp-rail-arrow.prev{left:8px}
.bp-rail-arrow.next{right:8px}
.bp-rail-arrow:hover:not(:disabled),.bp-rail-arrow:focus-visible:not(:disabled){
  border-color:var(--blue,#00e5ff);
  box-shadow:0 0 18px rgba(0,229,255,.34),0 0 10px rgba(255,46,196,.14);
}
.bp-rail-arrow:disabled{opacity:.38;cursor:default}
@media(min-width:700px){
  .bp-rail-arrow{display:grid!important;visibility:visible!important;opacity:1}
  .bp-rail-arrow:disabled{opacity:.38}
}
@media(max-width:699px){
  .bp-rail-arrow{display:none}
}

.bp-rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.bp-rail.dragging .bp-rail-card{transition:none}
.bp-rail[role="list"]>[role="listitem"]{display:contents}

.bp-rail-card{
  position:relative;flex:0 0 auto;
  /* The NEXT card peeks past the edge, but the ACTIVE card is never cut.
     width is a PERCENTAGE of the rail's content box, so a single card always
     fits the usable viewport at every tested width. */
  width:86%;
  max-width:340px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  border-radius:22px;padding:26px 20px;text-align:center;
  background:var(--grad-surface);
  border:1px solid var(--rim-soft);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  /* Comfortable touch target. */
  min-height:230px;
  display:flex;flex-direction:column;align-items:center;
  user-select:none;-webkit-user-select:none;
  cursor:grab;
}

/* ============================================================
   MOBILE RAIL — NATURAL CONTINUOUS SWIPE (no snapping)
   ------------------------------------------------------------
   LIVE BUG: on a real phone the rail FORCED the strip to rest on a snap point,
   which could still leave half of one card + half of another, and the member
   could not simply keep swiping from where their finger/momentum stopped.

   The forced stop came from `scroll-snap-type:x mandatory` plus
   `scroll-snap-stop:always` (which additionally blocks a fast flick from
   skipping past a card). That is removed on MOBILE ONLY, so the rail behaves
   like an ordinary horizontal scroll strip:

     • touch, drag freely left or right
     • release and let the phone's own momentum continue
     • cross several cards in one gesture
     • rest wherever the finger/momentum naturally stops
     • continue immediately from that exact position

   `scroll-snap-type:none` is the explicit override (never a different forced
   snapping scheme). `scroll-behavior:auto` is deliberate: `smooth` animates
   programmatic scrolls and can make the strip feel like it is fighting the
   finger, so natural touch physics stay in charge.

   ORDER MATTERS: this block sits AFTER the base `.bp-rail` / `.bp-rail-card`
   rules, because equal specificity means the LAST declaration wins. Placed
   earlier, the base `scroll-snap-align:start` would override it and mobile
   would silently keep snapping. Desktop keeps its snapping — this whole block
   is scoped to narrow viewports.

   ------------------------------------------------------------
   EDGE GEOMETRY — WHY THE FIRST AND LAST CARD WERE CLIPPED
   ------------------------------------------------------------
   The base card rule is `width:86%` BUT `max-width:340px`. The rail's usable
   box on a phone is the viewport minus the entry padding (2 x 24px), so at
   320-430px the rail is only 272-382px wide. 86% of that is 234-329px, which
   is under the 340px cap — so the cap looked harmless. It is not: at 430px
   the card wanted 86% x 382px = 329px and the NEXT card (plus gap) only just
   cleared the edge. The cap then became the binding constraint and, together
   with the rail's own inline padding, left the first card's left border and
   the last card's right border sitting permanently outside the scrollport.

   The mobile rule below makes ONE complete card fit the usable rail box at
   every supported width, with the 16px gap acting as the guaranteed gutter at
   BOTH ends. The card is a little narrower than before, so a preview of the
   next card is still visible — but full visibility of card 1 and card 5 is
   never traded away for that peek.
   ============================================================ */
@media (max-width:899px){
  .bp-rail{
    scroll-snap-type:none;      /* user decides where the strip stops */
    scroll-behavior:auto;       /* never animate/override finger momentum */
  }
  /* No snap target at all — including the explicit stop that blocked fast
     flicks from travelling past a card. `!important`-free, but declared last
     so it wins on source order. */
  .bp-rail .bp-rail-card{
    scroll-snap-align:none;
    scroll-snap-stop:normal;
  }
  /* ------------------------------------------------------------
     ONE COMPLETE CARD FITS — AND BOTH ENDS REACH FULLY VISIBLE
     ------------------------------------------------------------
     `width:calc(100% - 16px)` is a percentage of the rail's CONTENT box, so
     the card is always exactly the usable width minus one 16px gutter. Flex +
     `overflow-x:auto` then reserves the rail's inline padding at both ends, so
     scrolling to scrollLeft 0 puts card 1's left border on screen and scrolling
     to max scroll puts card 5's right border on screen — each with that same
     16px gutter. `max-width:none` is ESSENTIAL: without it the base
     `max-width:340px` binds on a wider phone and the last card can no longer be
     brought fully into view. The card is NEVER given `flex:1` — width stays
     purely width-derived so `max-width:100%` can never become an under-sized
     flex base and cut the last card short. */
  .bp-rail .bp-rail-card{
    width:calc(100% - 16px);
    max-width:calc(100% - 16px);
    min-width:0;
  }
  /* A drag class applied by the desktop mouse handler must not change mobile
     behaviour if it is ever set; keep the override authoritative. */
  .bp-rail.dragging{scroll-snap-type:none;scroll-behavior:auto}
}
.bp-rail-card .ic{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center}
.bp-rail-card .ic svg{width:100%;height:100%}
.bp-rail-card h3{
  margin:0 0 8px;font-size:16px;font-weight:900;letter-spacing:.08em;color:var(--white);
}
.bp-rail-card p{
  margin:0;font-size:13px;line-height:1.5;color:var(--dim);
}
.bp-rail-card .go,.bp-rail-card .soon{
  margin-top:auto;padding-top:14px;font-size:12px;font-weight:800;letter-spacing:.12em;
}
.bp-rail-card .go{color:var(--blue);text-shadow:0 0 14px rgba(0,229,255,.38)}

/* --- the two LIVE product cards keep their approved accents --- */
.bp-rail-card.live{cursor:pointer}

/* --- the three CATEGORY cards: established categories, not clickable --- */
.bp-rail-card.soon-card{cursor:default;opacity:.94}
.bp-rail-card.soon-card h3{color:var(--white)}
.bp-rail-card .soon{font-size:11px;letter-spacing:.14em}

/* ============================================================
   PER-CARD PALETTE IDENTITY
   ------------------------------------------------------------
   All five cards are ONE design system (same shape, rim, glow and type),
   but each carries its own APPROVED BYP colour:
      CHECK A MATCH -> ELECTRIC PINK
      BYP EVENTS    -> ELECTRIC BLUE
      WELLNESS      -> PURPLE
      GROWTH        -> BLUE
      ENJOYMENT     -> PINK
   Colour is applied through rim + glow + icon accent + a small accent
   detail — never a giant solid neon block. Base stays BLACK; text WHITE.
   ============================================================ */
.bp-rail-card.check-match{ --accent:var(--pink,#ff2ec4);      --accent-soft:rgba(255,46,196,.42); }
.bp-rail-card.byp-events { --accent:var(--blue,#00e5ff);      --accent-soft:rgba(0,229,255,.42); }
.bp-rail-card.wellness   { --accent:var(--purple,#a855ff);    --accent-soft:rgba(168,85,255,.42); }
.bp-rail-card.growth     { --accent:var(--softblue,#7ce9ff);  --accent-soft:rgba(124,233,255,.42); }
.bp-rail-card.enjoyment  { --accent:var(--softpink,#ff8fd8);  --accent-soft:rgba(255,143,216,.42); }

/* Rim + a restrained ambient wash tinted to the card's own accent. */
.bp-rail-card{
  border-color:color-mix(in srgb, var(--accent,var(--rim-soft)) 46%, transparent);
  background-image:
    linear-gradient(150deg,
      color-mix(in srgb, var(--accent,transparent) 22%, transparent),
      transparent 62%),
    var(--grad-surface-2);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .bp-rail-card.check-match{border-color:var(--rim-pink);background-image:var(--grad-pink),var(--grad-surface-2)}
  .bp-rail-card.byp-events{border-color:var(--rim-blue);background-image:var(--grad-blue),var(--grad-surface-2)}
  .bp-rail-card.wellness{border-color:var(--rim-purple);background-image:var(--grad-purple),var(--grad-surface-2)}
  .bp-rail-card.growth{border-color:var(--rim-soft);background-image:var(--grad-ice),var(--grad-surface-2)}
  .bp-rail-card.enjoyment{border-color:var(--rim-pink);background-image:var(--grad-pink),var(--grad-surface-2)}
}

/* Icon glow in the card's accent. */
.bp-rail-card .ic{filter:drop-shadow(0 0 16px var(--accent-soft,transparent))}

/* The CTA / status line carries the accent as the small text detail. */
.bp-rail-card .go{color:var(--accent,var(--blue));text-shadow:0 0 14px var(--accent-soft,transparent)}
.bp-rail-card .soon{color:var(--accent,var(--violet));text-shadow:0 0 12px var(--accent-soft,transparent)}

/* A 3px accent rule along the top edge — the shared system detail that makes
   every card read as one family while showing its own colour. */
.bp-rail-card::before{
  content:'';position:absolute;left:16%;right:16%;top:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--accent,transparent);
  box-shadow:0 0 12px var(--accent-soft,transparent);
  opacity:.9;
}

/* hover lift only where hover exists (never on touch) */
@media (hover:hover){
  .bp-rail-card.live:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
  .bp-rail-card.live:hover{border-color:var(--accent,var(--blue))}
}
.bp-rail-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Desktop: bounded width so no tile becomes a giant slab. */
@media (min-width:900px){
  .bp-rail{gap:20px}
  .bp-rail-card{width:calc((100% - 60px)/3.35);max-width:330px;min-height:250px}
}
@media (max-width:520px){
  .bp-rail-card{width:86%;min-height:215px;padding:22px 16px}
}

/* ============================================================
   2. "NEW? START HERE" ENTRY
   ============================================================ */
.bp-starthere-wrap{margin:26px auto 0;text-align:center;width:100%;max-width:100%;min-width:0}
.bp-starthere{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--pink);border-radius:999px;
  background:linear-gradient(135deg,rgba(255,46,196,.16),rgba(168,85,255,.14) 52%,rgba(0,229,255,.14));
  color:var(--white);font-weight:900;letter-spacing:.16em;font-size:14px;
  padding:16px 30px;cursor:pointer;
  box-shadow:0 0 26px rgba(255,46,196,.34),var(--highlight);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.bp-starthere:hover{border-color:var(--white);transform:translateY(-2px);box-shadow:0 0 34px rgba(255,46,196,.5)}
.bp-starthere:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.bp-starthere .arw{color:var(--pink)}
.bp-starthere[aria-expanded="true"] .arw{transform:rotate(90deg)}
.bp-starthere .arw{transition:transform .3s ease;display:inline-block}
.bp-starthere-sub{
  margin:10px auto 0;max-width:520px;font-size:12.5px;line-height:1.55;color:var(--dim2);
}

/* ============================================================
   3. THE FUNNEL (expands BENEATH the existing Home — same page)
   ============================================================ */
.bp-funnel{
  margin:34px auto 0;width:100%;max-width:900px;min-width:0;
  display:none;text-align:left;
  border-top:1px solid var(--rim-soft);
  padding-top:34px;
  overflow-x:hidden;   /* the funnel itself can never widen the page */
}
.bp-funnel.open{display:block;animation:bpFade .5s ease both}
@keyframes bpFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.bp-sec{margin:0 0 54px;text-align:center}
.bp-sec h2{
  margin:0 0 12px;font-size:clamp(21px,3.4vw,30px);font-weight:900;
  letter-spacing:.02em;line-height:1.22;color:var(--white);
}
.bp-sec h2 .bl,.bp-sec h2 .pk{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bp-sub{margin:0 auto 18px;max-width:640px;font-size:14.5px;line-height:1.6;color:var(--dim)}
.bp-eyebrow{
  margin:0 0 18px;font-size:12px;font-weight:900;letter-spacing:.2em;color:var(--softblue);
}
.bp-note{margin:14px auto 0;max-width:620px;font-size:12.5px;line-height:1.55;color:var(--dim2)}

/* --- hero --- */
.bp-brand{
  font-size:clamp(26px,5vw,44px);font-weight:900;letter-spacing:.06em;color:var(--white);
  margin-bottom:12px;
}
.bp-brand .compass{
  background:var(--grad-brand-brand,linear-gradient(135deg,var(--pink),var(--violet),var(--blue)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.bp-line2{margin:8px 0;font-size:clamp(14px,2.4vw,19px);font-weight:900;letter-spacing:.22em;color:var(--pink)}
.bp-line3{margin:0 0 20px;font-size:clamp(11px,1.7vw,13px);font-weight:800;letter-spacing:.18em;color:var(--softblue)}
.bp-hook{
  margin:22px auto 8px;max-width:700px;font-size:clamp(18px,3vw,26px);font-weight:900;
  line-height:1.3;color:var(--white);
}
.bp-pillars{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 6px;
}
.bp-pillars span{
  border:1px solid var(--rim-purple);border-radius:999px;padding:7px 15px;
  font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--white);
  background:rgba(168,85,255,.10);
}

/* --- the ONE CTA style, used everywhere --- */
.bp-cta{
  display:inline-block;margin-top:20px;
  border:1px solid var(--pink);border-radius:999px;
  background:linear-gradient(135deg,rgba(255,46,196,.22),rgba(168,85,255,.16) 55%,rgba(0,229,255,.16));
  color:var(--white);font-weight:900;letter-spacing:.13em;font-size:13.5px;
  padding:15px 30px;cursor:pointer;
  box-shadow:0 0 22px rgba(255,46,196,.32),var(--highlight);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  max-width:100%;
}
.bp-cta:hover{transform:translateY(-2px);border-color:var(--white);box-shadow:0 0 30px rgba(255,46,196,.46)}
.bp-cta:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* --- images: NEVER cropped, NEVER stretched --- */
.bp-imgwrap{margin:22px auto 0;max-width:720px;width:100%}
.bp-imgwrap.gone{display:none}
.bp-img{
  display:block;width:100%;height:auto;   /* proportional — whole image, no crop */
  object-fit:contain;max-width:100%;
  border-radius:18px;
}

/* --- four questions --- */
.bp-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
.bp-grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bp-tile{
  border:1px solid var(--rim-purple);border-radius:16px;padding:18px 16px;
  background:var(--grad-surface-2);text-align:left;
}
.bp-tile .k{font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--pink);margin-bottom:8px}
.bp-tile .q{font-size:14px;line-height:1.5;color:var(--white)}

/* --- scenarios + steps --- */
.bp-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.bp-list li{
  border:1px solid var(--rim-soft);border-left:3px solid var(--blue);border-radius:12px;
  padding:14px 16px;font-size:14px;line-height:1.5;color:var(--white);text-align:left;
  background:var(--grad-surface-2);
}
.bp-step{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  border:1px solid var(--rim-blue);border-radius:16px;padding:16px;
  background:var(--grad-surface-2);
}
.bp-step .n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--bg);
  background:var(--grad-brand-soft);
}
.bp-step .t{font-size:14px;font-weight:900;letter-spacing:.04em;color:var(--white)}
.bp-step .d{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--dim)}

/* --- sample reveal: WHOLE numbers only, no percentages --- */
.bp-scores{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:6px;
}
.bp-score{
  border:1px solid var(--rim-soft);border-radius:16px;padding:16px 12px;
  background:var(--grad-surface-2);
}
.bp-score small{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:var(--dim);margin-bottom:6px;text-transform:uppercase;
}
.bp-score b{font-size:26px;font-weight:900;color:var(--white)}
.bp-score b .of{font-size:14px;color:var(--dim)}

.bp-demo{
  margin-top:20px;border:1px solid var(--rim-soft);border-radius:14px;
  padding:14px 16px;background:rgba(255,255,255,.03);text-align:left;
}
.bp-demo .h{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--pink);margin-bottom:7px}
.bp-demo p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}

/* --- testimonials: mobile swipe rail / desktop readable cards --- */
.bp-tst-rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:6px 2px 14px;scrollbar-width:none;-ms-overflow-style:none;
}
.bp-tst-rail::-webkit-scrollbar{display:none}
.bp-tst{
  flex:0 0 auto;width:80%;max-width:340px;scroll-snap-align:start;
  border:1px solid var(--rim-purple);border-radius:18px;padding:20px;
  background:var(--grad-surface-2);text-align:left;
}
/* MOBILE: the same continuous-swipe treatment as the 5-card Home rail. The
   testimonial strip carried the identical forced snap, so on a phone it also
   stopped only on a card boundary and could rest showing two half cards. The
   user's finger and momentum decide where it stops. Declared AFTER the base
   rules (equal specificity — last wins) and scoped to narrow viewports, so
   desktop keeps its snapping. */
@media (max-width:899px){
  .bp-tst-rail{scroll-snap-type:none;scroll-behavior:auto}
  .bp-tst-rail .bp-tst{scroll-snap-align:none;scroll-snap-stop:normal}
}
.bp-tst .body{font-size:14px;line-height:1.62;color:var(--white)}
.bp-tst .who{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp-tst .nm{font-size:12.5px;font-weight:900;letter-spacing:.08em;color:var(--white)}
.bp-tst .vf{
  font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--softblue);
  border:1px solid var(--rim-blue);border-radius:999px;padding:4px 10px;
}
.bp-tst-empty{
  border:1px dashed var(--rim-soft);border-radius:16px;padding:22px 18px;
  font-size:13px;line-height:1.6;color:var(--dim2);
}
@media (min-width:900px){
  .bp-tst-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));overflow:visible}
  .bp-tst{width:auto;max-width:none}
}

/* --- offer --- */
.bp-offer .bp-price{
  font-size:clamp(38px,7vw,60px);font-weight:900;letter-spacing:.02em;margin:6px 0 4px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bp-offer-list{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0 6px}
.bp-offer-list span{
  border:1px solid var(--rim-soft);border-radius:999px;padding:8px 15px;
  font-size:12px;font-weight:700;color:var(--white);background:rgba(255,255,255,.04);
}
.bp-decision{
  margin:16px 0 0;font-size:12.5px;font-weight:900;letter-spacing:.16em;color:var(--softblue);
}

/* --- FAQ accordion (compact, keyboard operable) --- */
.bp-faq{display:grid;gap:10px;margin-top:10px}
.bp-faq-item{
  border:1px solid var(--rim-soft);border-radius:14px;overflow:hidden;
  background:var(--grad-surface-2);text-align:left;
}
.bp-faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  background:none;border:0;color:var(--white);font-size:14px;font-weight:800;
  padding:16px;cursor:pointer;text-align:left;letter-spacing:.01em;
}
.bp-faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.bp-faq-q .cx{color:var(--pink);font-size:18px;transition:transform .25s ease;flex:0 0 auto}
.bp-faq-item.open .bp-faq-q .cx{transform:rotate(45deg)}
.bp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.bp-faq-item.open .bp-faq-a{max-height:520px}
.bp-faq-inner{
  padding:0 16px 16px;font-size:13.5px;line-height:1.62;color:var(--dim);
}

/* --- final close --- */
.bp-close{text-align:center;padding:14px 0 28px}
.bp-close .big{
  font-size:clamp(17px,2.9vw,24px);font-weight:900;line-height:1.35;color:var(--white);
  margin:14px 0;
}
.bp-close .big .bl{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bp-close .closing{
  margin-top:22px;font-size:12.5px;font-weight:900;letter-spacing:.24em;color:var(--softblue);
}

/* ============================================================
   4. TESTIMONIAL PROMPT — a light, occasional post-use card
   ------------------------------------------------------------
   Deliberately small and dismissible: it never covers the app and never
   appears while a Check Match / Reveal / event is in progress.
   ============================================================ */
.byp-tstp{
  position:fixed;right:18px;bottom:18px;z-index:900;width:340px;max-width:calc(100vw - 28px);
  border:1px solid var(--rim-purple);border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(0,0,0,.92) 60%);
  box-shadow:var(--shadow-card);backdrop-filter:blur(8px);
}
.byp-tstp-in{padding:18px}
.byp-tstp-t{
  font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--white);margin-bottom:8px;
}
.byp-tstp-s{font-size:12px;line-height:1.55;color:var(--dim);margin-bottom:12px}
.byp-tstp label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--softblue);margin:10px 0 5px;
}
.byp-tstp textarea,.byp-tstp select{
  width:100%;background:#0d0d0d;border:1px solid var(--rim-soft);border-radius:10px;
  color:var(--white);padding:9px 10px;font-size:12.5px;font-family:inherit;
}
.byp-tstp textarea{resize:vertical}
.byp-tstp textarea:focus-visible,.byp-tstp select:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;
}
.byp-tstp-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.byp-tstp-quote{
  border-left:3px solid var(--pink);padding:12px 14px;margin:10px 0;
  font-size:13px;line-height:1.62;color:var(--white);
  background:rgba(255,46,196,.06);border-radius:0 12px 12px 0;
  max-height:190px;overflow:auto;
}
@media (max-width:520px){
  .byp-tstp{right:10px;left:10px;bottom:10px;width:auto}
}

/* ============================================================
   5. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bp-rail{scroll-behavior:auto}
  .bp-funnel.open{animation:none}
  .bp-rail-card,.bp-cta,.bp-starthere,.bp-faq-a,.bp-faq-q .cx{transition:none}
}

/* ============================================================
   6. MOBILE RAIL — END REACHABILITY (first/last card fully viewable)
   ------------------------------------------------------------
   Flex + `overflow-x:auto` already reserves the rail's inline padding at both
   ends, so the FIRST and LAST card can each scroll fully into view. This block
   is the backstop for that guarantee.

   The real defect it now guards against: `.bp-rail-wrap` and `#bpRailMount`
   are plain block boxes, and a CARD WIDER THAN THE RAIL makes them report an
   intrinsic min-content width — which pushes the mount wider than the entry
   container and slides the whole strip off-centre, so the first card's left
   border and the last card's right border both end up outside the scrollport.
   `min-width:0` on every wrapper and `overflow-x:auto` on the mount keep the
   mount pinned to the container width and let the RAIL be the only thing that
   scrolls. It is a static containment rule only — the rail is never forced to
   a scroll position, so free swipe, momentum and arbitrary resting points are
   all untouched.
   ============================================================ */
@media (max-width:899px){
  #bpRailMount,
  #bpRailMount .bp-rail-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:visible;
  }
  .bp-rail{
    padding-left:4px;
    padding-right:4px;
    /* A hard guarantee that the rail itself never becomes a page-wide
       scroller: the page clips horizontally, the rail contains its own. */
    max-width:100%;
  }
}


/* 2026-09-19 — testimonial is opened intentionally from Profile / More.
   Keep every question/action reachable above mobile browser chrome + BYP nav. */
.byp-tstp.manual-open{
  top:50%;
  right:auto;
  bottom:auto;
  left:50%;
  width:min(520px,calc(100vw - 28px));
  max-height:min(82dvh,720px);
  transform:translate(-50%,-50%);
  overflow-y:auto;
  overflow-x:hidden;
  z-index:980;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:520px){
  .byp-tstp.manual-open{
    left:10px;
    right:10px;
    top:max(14px,env(safe-area-inset-top));
    bottom:calc(78px + env(safe-area-inset-bottom));
    width:auto;
    max-height:none;
    transform:none;
  }
  .byp-tstp.manual-open .byp-tstp-in{
    padding-bottom:22px;
  }
}