/* =========================================================================
   NOBP 504 — the Bounce Button page
   -------------------------------------------------------------------------
   Layers on top of nobp.css. Note what is NOT here: any rule named .bounce.
   That class belongs to hero-live.css, which only index.html loads; defining
   it again anywhere else is how the header button once grew to hero size and
   started bouncing next to Sign in. Everything on this page is .bb-*.
   ========================================================================= */

/* ── hero ──────────────────────────────────────────────────────────────── */
.bb-hero { padding-block: clamp(40px, 9vw, 86px) clamp(32px, 6vw, 60px); text-align: center; }
.bb-hero h1 {
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(42px, 12vw, 92px);
  line-height: 0.96; margin: 6px 0 14px; text-transform: uppercase;
  letter-spacing: 0.01em;
}
.bb-hero h1 .bb-gold { color: var(--gold, #d9a62e); display: block; }
.bb-lede {
  max-width: 34ch; margin: 0 auto; color: rgba(247,240,223,0.76);
  font-size: clamp(15px, 2.4vw, 18px); line-height: 1.6;
}

/* The button itself. Sized here and nowhere else. */
.bb-stage { margin: clamp(26px, 6vw, 44px) auto clamp(14px, 3vw, 20px); }
.bb-button {
  position: relative; display: block; margin: 0 auto;
  width: clamp(200px, 56vw, 310px); aspect-ratio: 1 / 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), filter 0.3s ease;
  filter: drop-shadow(0 20px 46px rgba(0,0,0,0.6));
}
.bb-button:hover  { transform: translateY(-3px) scale(1.012); }
.bb-button:active { transform: translateY(1px) scale(0.985); }
.bb-button:focus-visible { outline: 3px solid var(--gold-bright, #f0c24e); outline-offset: 10px; border-radius: 50%; }
.bb-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bb-button[data-state='playing'] { filter: drop-shadow(0 22px 54px rgba(217,166,46,0.38)); }
.bb-cue {
  margin: 0; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(247,240,223,0.56);
}

/* ── install ───────────────────────────────────────────────────────────── */
.bb-install-grid {
  display: grid; gap: 16px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bb-card {
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 16px; padding: 22px 20px;
  background: rgba(255,255,255,0.022);
}
.bb-card h3 {
  margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 9px;
}
.bb-card ol { margin: 0; padding-left: 19px; color: rgba(247,240,223,0.78); line-height: 1.65; font-size: 15px; }
.bb-card li + li { margin-top: 5px; }
.bb-card b { color: var(--cream, #f7f0df); }
.bb-installed {
  margin-top: 18px; padding: 13px 16px; border-radius: 12px; font-size: 14.5px;
  border: 1px solid rgba(217,166,46,0.36); background: rgba(217,166,46,0.07);
  color: rgba(247,240,223,0.84);
}

/* ── coming soon ───────────────────────────────────────────────────────── */
.bb-soon { position: relative; }
/* One column for everything in these sections. Without it the heading sat
   against the page gutter while the capped artwork floated centre, and the
   two never lined up at desktop widths. */
.bb-soon .wrap { max-width: 880px; }
.bb-soon .section-note { max-width: none; }
.bb-tag {
  display: inline-block; margin-bottom: 12px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(217,166,46,0.5); background: rgba(217,166,46,0.1);
  color: var(--gold, #d9a62e);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
/* The creative is 1400x1050. Left unconstrained it eats a whole desktop
   screen and the viewer has to scroll past it to reach the waitlist, so it
   is capped and centred; on a phone it still goes edge to edge. */
.bb-ad {
  display: block; width: 100%; height: auto;
  max-width: 880px; margin: 22px auto 0;
  border-radius: 16px; border: 1px solid rgba(217,166,46,0.26);
}
.bb-views {
  display: grid; gap: 12px; margin: 12px auto 0; max-width: 880px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bb-views figure { margin: 0; }
/* The three crops have different native aspect ratios (230, 142 and 113px
   tall), so their captions used to land on three different lines. Forcing a
   shared aspect-ratio with object-fit: cover fixed the alignment but cropped
   the thumb straight out of "the press" - the one thing that photo is of.
   So the images keep their real shapes and the CAPTION is pushed to the
   bottom of its cell instead. Nothing is cropped and the labels still line
   up. */
.bb-views figure { display: flex; flex-direction: column; height: 100%; }
.bb-views img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.09);
}
.bb-views figcaption {
  margin-top: auto; padding-top: 7px; font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(247,240,223,0.5);
}
/* Capped at two columns. auto-fit across a 1400px container produced seven
   thin ones, each too narrow for its own line of text. */
.bb-specs {
  list-style: none; margin: 26px auto 0; padding: 0; max-width: 880px;
  display: grid; gap: 11px 26px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.bb-specs li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.45; color: rgba(247,240,223,0.82);
}
.bb-specs li::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; background: var(--gold, #d9a62e);
}
.bb-disclaimer { margin: 18px auto 0; max-width: 880px; font-size: 12.5px; color: rgba(247,240,223,0.42); }

/* ── waitlist ──────────────────────────────────────────────────────────── */
.bb-waitlist {
  margin: 30px auto 0; max-width: 880px; padding: 24px 22px; border-radius: 18px;
  border: 1px solid rgba(217,166,46,0.34);
  background: linear-gradient(180deg, rgba(217,166,46,0.09), rgba(217,166,46,0.02));
}
.bb-waitlist h3 { margin: 0 0 6px; font-size: clamp(19px, 3.4vw, 25px); }
.bb-waitlist p  { margin: 0 0 16px; color: rgba(247,240,223,0.74); font-size: 15px; line-height: 1.55; }
.bb-form { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-form input {
  flex: 1 1 220px; min-width: 0;
  padding: 13px 15px; border-radius: 999px; font-size: 15px;
  border: 1px solid var(--line, rgba(255,255,255,0.14));
  background: rgba(0,0,0,0.38); color: var(--cream, #f7f0df);
}
.bb-form input::placeholder { color: rgba(247,240,223,0.4); }
.bb-form input:focus-visible { outline: 2px solid var(--gold, #d9a62e); outline-offset: 1px; }
.bb-form button { flex: 0 0 auto; }
.bb-note { margin: 12px 0 0; font-size: 14px; color: var(--gold, #d9a62e); min-height: 20px; }
.bb-note a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .bb-button { transition: none; }
  .bb-button:hover, .bb-button:active { transform: none; }
}