/* ============================================================
   Caribou Health — Choose Your Plan, Mobile UX design (Plans.jsx).
   Mobile-scoped reskin of #page-tiers; desktop unchanged.
   ============================================================ */

@media (max-width: 640px) {

  #page-tiers { background: var(--cbm-gray-50); }

  /* ── Hero header: gradient block, serif title ── */
  #page-tiers .text-center.mb-8 {
    background: var(--cbm-gradient-hero);
    border-bottom-left-radius: 22px; border-bottom-right-radius: 22px;
    padding: calc(20px + env(safe-area-inset-top, 0)) 24px 18px;
    margin: 0 -16px 16px;
  }
  #page-tiers .text-center.mb-8 h1 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 26px; color: var(--cbm-gray-900); margin: 0;
  }
  #page-tiers .welcome-slogan { display: none; }
  #page-tiers .text-center.mb-8 p { font-size: 13.5px; color: var(--cbm-primary-800); }
  #page-tiers .intake-logo { width: 52px; height: 52px; }

  /* ── Plan cards ── */
  #page-tiers .tier-grid { display: flex; flex-direction: column; gap: 12px; }
  #page-tiers .tier-card {
    background: #fff; border: 1.5px solid var(--cbm-gray-200);
    border-radius: 16px; padding: 16px 16px 14px; position: relative;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }
  #page-tiers .tier-card.featured {
    border-color: var(--cbm-primary-500);
    box-shadow: 0 0 0 3px rgba(61,155,148,.14), 0 1px 3px 0 rgba(0,0,0,.1);
    transform: none;
  }
  #page-tiers .tier-badge {
    position: absolute; top: -9px; right: 16px; left: auto; transform: none;
    background: #e8a87c; color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
  }
  #page-tiers .tier-card-name {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 19px; color: var(--cbm-gray-900);
  }
  #page-tiers .tier-card-price {
    font-size: 20px; font-weight: 700; color: var(--cbm-primary-700);
  }
  #page-tiers .tier-features li {
    font-size: 13.5px; color: var(--cbm-gray-700); line-height: 1.35;
  }
  #page-tiers .tier-features li::before,
  #page-tiers .tier-features svg { color: var(--cbm-primary-500); }

  /* CTA buttons: brand gradient / pill outline */
  #page-tiers .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
    border-radius: var(--cbm-radius); width: 100%;
  }
  #page-tiers .btn-outline { border-radius: var(--cbm-radius); width: 100%; }

  /* ── Promo code row ── */
  #page-tiers .promo-code-card, #page-tiers .promo-code-section {
    background: none; border: none; box-shadow: none; padding: 0;
  }
  #page-tiers .promo-code-section input {
    border: 1px solid var(--cbm-gray-300); border-radius: var(--cbm-radius);
    padding: 11px 14px; font-size: 14px;
  }
}