/* ==========================================================================
   9wickets Pro — Mobile responsive pass (centered + compact)
   Loaded LAST so it wins. Targets phones/tablets.
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .pp-section { padding: clamp(28px, 5vw, 44px) 0; }
  .pp-section-head { margin-bottom: clamp(20px, 3.5vw, 30px); }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .pp-container { padding-inline: 16px; }
  .pp-section { padding: 30px 0; }
  .pp-section-head { margin-bottom: 20px; }

  /* ---- Header ---- */
  .pp-header__logo img { height: 38px; }
  .pp-header__bar-inner { height: 62px; gap: 12px; }
  .pp-header__notice-inner { gap: 8px; height: 36px; }
  .pp-header__notice-label { padding: 4px 11px; font-size: 0.74rem; }
  .pp-header__notice-social a { width: 26px; height: 26px; }

  /* ---- Hero: centered + compact ---- */
  .pp-hero { padding: 22px 0 32px; }
  .pp-hero__grid { gap: 24px; text-align: center; }
  .pp-hero__text { display: flex; flex-direction: column; align-items: center; }
  .pp-hero__eyebrow { align-self: center; }
  .pp-hero h1 { font-size: clamp(1.55rem, 1rem + 3.2vw, 2.15rem); margin: 12px 0 12px; }
  .pp-hero__lead { margin-inline: auto; font-size: 0.98rem; }
  .pp-hero__cta { justify-content: center; width: 100%; gap: 10px; }
  .pp-hero__cta .pp-btn { flex: 1 1 auto; justify-content: center; }
  .pp-chip-row { justify-content: center; margin-top: 16px; }
  .pp-hero__media { max-width: 340px; margin: 0 auto 6px; }
  /* Commission badge: smaller + moved to the clear lower-left so it stops
     covering the agent/tablet on the right side of the hero image. */
  .pp-hero__badge {
    right: auto; left: -6px; bottom: -12px;
    padding: 6px 13px; border-radius: 12px;
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.4);
  }
  .pp-hero__badge b { font-size: 1.05rem; }
  .pp-hero__badge span { font-size: 0.6rem; }

  /* ---- Admin credit pill ---- */
  .pp-admin { margin-bottom: 20px; }

  /* ---- Agent cards: compact ---- */
  .pp-agents__grid { gap: 14px; }
  .pp-agent-card { padding: 22px 18px; }
  .pp-agent-card__icon { width: 54px; height: 54px; margin-bottom: 14px; }
  .pp-agent-card h3 { font-size: 1.12rem; }
  .pp-agent-card p { min-height: 0; margin-bottom: 16px; }

  /* ---- Steps ---- */
  .pp-step { padding: 22px 20px; }
  .pp-step__num { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 14px; }

  /* ---- Features ---- */
  .pp-feature { padding: 18px 16px; gap: 13px; }
  .pp-feature__icon { width: 44px; height: 44px; }

  /* ---- Social community: full-width stacked, centered ---- */
  .pp-social__btns { flex-direction: column; align-items: stretch; }
  .pp-social__btn { justify-content: flex-start; }

  /* ---- Referral promo ---- */
  .pp-referral__promo { padding: 14px 10px 6px; }
  .pp-refcard__badge2 { left: 0; bottom: -12px; padding: 9px 14px; }
  .pp-refcard__badge2 b { font-size: 1.35rem; }
  .pp-refcard__chip { right: 0; top: 4%; }
  .pp-refcard__coin--tr { right: 0; }
  .pp-referral__feats { flex-direction: column; align-items: center; gap: 10px; margin: 30px 0 22px; }

  /* ---- Support cards: centered ---- */
  .pp-support-card { padding: 24px 20px; align-items: center; text-align: center; }
  .pp-support-card .pp-btn { align-self: center; }

  /* ---- Betting sites cards: stacked, centered ---- */
  .pp-site-card { flex-direction: column; text-align: center; gap: 12px; padding: 22px 18px; }
  .pp-site-card__body { align-items: center; }
  .pp-site-card__body b { font-size: 1.02rem; }
  .pp-site-card__go { position: absolute; top: 14px; right: 14px; }

  /* ---- Guide accordions ---- */
  .pp-acc__head { padding: 14px 14px; }
  .pp-acc__title { font-size: 0.96rem; }

  /* ---- CTA band ---- */
  .pp-cta-band__inner .pp-hero__cta { flex-direction: column; }
  .pp-cta-band__inner .pp-btn { width: 100%; }

  /* ---- FOOTER: centered + padded ---- */
  .pp-footer__inner { padding-inline: 20px; }
  .pp-footer__grid { text-align: center; gap: 30px 24px; }
  .pp-footer__brand, .pp-footer__col { display: flex; flex-direction: column; align-items: center; }
  .pp-footer__about { max-width: 40ch; margin-inline: auto; }
  .pp-footer__social { justify-content: center; }
  .pp-footer__col h4 { align-self: center; }
  .pp-footer__col h4::after { left: 50%; transform: translateX(-50%); }
  .pp-footer__links { justify-items: center; width: 100%; }
  .pp-footer__links a { justify-content: center; }
  .pp-footer__links a::before { display: none; }
  .pp-footer__pills { width: 100%; max-width: 300px; margin-inline: auto; }
  .pp-footer__note-18 { justify-content: center; }
  .pp-footer__bottom { flex-direction: column; text-align: center; gap: 8px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  .pp-title { font-size: 1.5rem; }
  .pp-hero h1 { font-size: 1.5rem; }
  .pp-hero__cta { flex-direction: column; }
  .pp-hero__cta .pp-btn { width: 100%; }
  .pp-stat__num { font-size: 1.35rem; }
  .pp-stat__label { font-size: 0.76rem; }
  .pp-admin__pill { padding: 6px 14px 6px 6px; }
  .pp-admin__name { font-size: 0.9rem; }
}