/* ============================================================
   CHEDDERS PAY — responsive.css
   V3 Tier System — 5 breakpoints
   Tier 0: ≤320px · Tier 1: ≤575px · Tier 2: 576-991px
   Tier 3: 992-1399px · Tier 4: ≥1400px
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TIER 0 — max-width: 320px  (smallest mobile, V3 mandatory)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 320px) {

  /* Typography */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }
  p  { font-size: 14px; }

  /* Container */
  .container { padding-left: 12px; padding-right: 12px; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero__inner { padding-top: 28px; padding-bottom: 28px; }
  .hero__content { max-width: 100%; text-align: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__eyebrow  { justify-content: center; }
  .hero__visual   { order: -1; padding: 0; }
  .hero__card-wrap { max-width: 100%; margin: 0; }
  .hero__stat      { display: none; }
  .btn-group       { justify-content: center; }

  /* Grids → single column */
  .about-grid,
  .why-grid,
  .merchant-grid   { grid-template-columns: 1fr; gap: 24px; }
  .dev-status-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-mini-grid  { grid-template-columns: 1fr; gap: 12px; }

  /* Footer — 4 cols compressed at narrowest */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .footer__col-title    { font-size: 10px; }
  .footer__links a      { font-size: 10px; }
  .footer__brand-desc   { display: none; }
  .footer__main         { padding: 28px 0 20px; }

  /* Cards */
  .card { padding: 16px; }

  /* Access panel */
  .access-panel { padding: 28px 16px; }
  .access-form-row { flex-direction: column; }
  .access-form-row .form-input,
  .access-form-row .btn { width: 100%; }

  /* Section headers */
  .section-header  { margin-bottom: 24px; }
  .section-header .section-desc { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   TIER 1 — max-width: 575px  (standard mobile)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {

  /* Typography */
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  /* Container */
  .container { padding-left: 16px; padding-right: 16px; }

  /* Hero layout */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero__inner { padding-top: 36px; padding-bottom: 44px; text-align: center; }
  .hero__content { max-width: 100%; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__eyebrow  { justify-content: center; }
  .hero__visual   { order: -1; padding: 0; }
  .hero__card-wrap { max-width: 100%; margin: 0; }
  .hero__stat      { display: none; }
  .btn-group       { justify-content: center; }

  /* All 2-col → 1-col */
  .about-grid,
  .why-grid,
  .merchant-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Dev status 3 → 1 */
  .dev-status-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Stat mini grid stays 2 cols */
  .stat-mini-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Footer — 4 columns always, compressed */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .footer__col-title  { font-size: 11px; letter-spacing: 0.05em; }
  .footer__links a    { font-size: 12px; }
  .footer__brand-desc { display: none; }
  .footer__main       { padding: 36px 0 24px; }
  .footer__bottom     { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__bottom p   { font-size: 11px; }

  /* Cards */
  .card { padding: 18px; }

  /* Access panel */
  .access-panel { padding: 36px 20px; }
  .access-form-row { flex-direction: column; }
  .access-form-row .form-input,
  .access-form-row .btn { width: 100%; }

  /* Pillar list stacks */
  .pillar-list { gap: 12px; }

  /* Section headers */
  .section-header { margin-bottom: 32px; }
}

/* ══════════════════════════════════════════════════════════
   TIER 2 — 576px to 991px  (tablet / large mobile)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 576px) and (max-width: 991px) {

  /* Typography */
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }

  /* Hero: stack on tablet — content too cramped side-by-side */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero__inner { padding-top: 48px; padding-bottom: 56px; text-align: center; }
  .hero__content { max-width: 520px; margin: 0 auto; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__eyebrow  { justify-content: center; }
  .hero__visual   { order: -1; padding: 12px 0; }
  .hero__card-wrap { max-width: 100%; margin: 0; }
  .hero__stat      { display: none; }
  .btn-group       { justify-content: center; }

  /* About / why / merchant → single col on tablet */
  .about-grid,
  .why-grid      { grid-template-columns: 1fr; gap: 32px; }
  .merchant-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Dev status 3 → 2 */
  .dev-status-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Stat mini stays 2 */
  .stat-mini-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Footer 4-col, tighter gap */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 20px; }
  .footer__col-title { font-size: 11px; }
  .footer__links a   { font-size: 13px; }
  .footer__brand-desc { max-width: 160px; }

  /* Access panel */
  .access-panel { padding: 48px 32px; }
}

/* ══════════════════════════════════════════════════════════
   TIER 3 — 992px to 1399px  (desktop)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1399px) {

  /* Hero */
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  /* card-wrap: full column width on desktop — landscape card fills naturally */

  /* Full 2-col layouts */
  .about-grid    { grid-template-columns: 1fr 1fr; gap: 48px; }
  .why-grid      { grid-template-columns: 1fr 1fr; gap: 48px; }
  .merchant-grid { grid-template-columns: 1fr 1fr; gap: 56px; }

  /* Dev status — 3 col */
  .dev-status-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* Footer full 4-col */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
  .footer__links a { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   TIER 4 — min-width: 1400px  (wide desktop)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {

  /* Hero more generous gap */
  .hero-grid { gap: 80px; }
  /* card-wrap: full column width on wide desktop */

  /* Wider merchant gap */
  .merchant-grid { gap: 80px; }
  .why-grid      { gap: 64px; }
  .about-grid    { gap: 64px; }

  /* Footer slightly wider columns */
  .footer-grid { gap: 40px; }
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  .navbar,
  .navbar__mobile-menu,
  .theme-toggle,
  .hero__stat,
  .footer__social {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; background: #fff; }
  a    { color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}