/* ApolloGroup Phase 29.1 — compact, readable mobile typography */
:root {
  --ag-mobile-page-gap: 14px;
  --ag-mobile-card-radius: 14px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas, svg {
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}

@media (max-width: 640px) {
  html { font-size: 14px; }

  body {
    font-size: 14px !important;
    line-height: 1.55;
  }

  h1 {
    font-size: clamp(1.45rem, 6.6vw, 1.75rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: clamp(1.18rem, 5.2vw, 1.42rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.018em;
  }

  h3 {
    font-size: clamp(1rem, 4.4vw, 1.16rem) !important;
    line-height: 1.3 !important;
  }

  h4, h5, h6 {
    font-size: .95rem !important;
    line-height: 1.35 !important;
  }

  p, li, label, small, .muted, .subtitle, .description, .helper, .hint {
    line-height: 1.55;
  }

  small, .small, .muted, .meta, .eyebrow, .caption {
    font-size: .78rem !important;
  }

  .container, .page, .page-wrap, .wrapper, main,
  .content, .content-wrap, .shell, .layout {
    max-width: 100% !important;
  }

  main, .page, .page-wrap, .content-wrap, .shell {
    padding-left: var(--ag-mobile-page-gap) !important;
    padding-right: var(--ag-mobile-page-gap) !important;
  }

  .card, .panel, .box, .surface, .stat-card, .invoice-card,
  .billing-card, .post-card, .settings-card, .form-card {
    border-radius: var(--ag-mobile-card-radius) !important;
  }

  .card, .panel, .box, .surface, .invoice-card,
  .billing-card, .settings-card, .form-card {
    padding: 14px !important;
  }

  button, .btn, .button, a.button, input[type="submit"] {
    min-height: 40px;
    padding: 9px 13px !important;
    font-size: .88rem !important;
    line-height: 1.15 !important;
    border-radius: 10px !important;
  }

  input, select, textarea {
    min-height: 42px;
    padding: 10px 12px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    border-radius: 10px !important;
  }

  textarea { min-height: 110px; }

  table {
    font-size: .82rem !important;
  }

  th, td {
    padding: 9px 8px !important;
  }

  .badge, .status, .chip, .tag, .pill {
    font-size: .72rem !important;
    line-height: 1.15 !important;
    padding: 5px 8px !important;
  }

  nav, header {
    font-size: .86rem;
  }

  /* Blog */
  .blog-hero, .article-hero {
    padding-top: 28px !important;
    padding-bottom: 22px !important;
  }

  .blog-grid, .posts-grid, .article-grid {
    gap: 12px !important;
  }

  .post-card, .blog-card {
    padding: 0 !important;
    overflow: hidden;
  }

  .post-card .content, .blog-card .content,
  .post-card-body, .blog-card-body {
    padding: 13px !important;
  }

  .post-card h2, .post-card h3,
  .blog-card h2, .blog-card h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .article-content, .prose, article {
    font-size: .94rem !important;
    line-height: 1.72 !important;
  }

  .article-content h2, .prose h2, article h2 {
    margin-top: 1.65em !important;
    margin-bottom: .6em !important;
  }

  .article-content h3, .prose h3, article h3 {
    margin-top: 1.35em !important;
    margin-bottom: .5em !important;
  }

  /* Admin and account pages */
  .admin-header, .page-header, .portal-header, .billing-header {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .stats-grid, .summary-grid, .dashboard-grid {
    gap: 10px !important;
  }

  .stat-card .value, .stat-value, .metric-value {
    font-size: 1.35rem !important;
  }

  .toolbar, .filters, .actions, .header-actions {
    gap: 8px !important;
  }

  /* Keep checkout plans compact and side-by-side */
  .plans-grid, .plan-grid, .pricing-grid {
    gap: 8px !important;
  }

  .plan-card, .pricing-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .plan-card h3, .pricing-card h3,
  .plan-name, .pricing-title {
    font-size: .92rem !important;
  }

  .plan-price, .price, .pricing-price {
    font-size: 1.35rem !important;
    line-height: 1.05 !important;
  }

  .plan-card p, .pricing-card p,
  .plan-description, .pricing-description {
    font-size: .74rem !important;
    line-height: 1.4 !important;
  }

  .plan-card button, .plan-card .btn,
  .pricing-card button, .pricing-card .btn {
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: .75rem !important;
  }
}

@media (max-width: 380px) {
  :root { --ag-mobile-page-gap: 11px; }
  html { font-size: 13.5px; }

  h1 { font-size: 1.42rem !important; }
  h2 { font-size: 1.16rem !important; }

  .card, .panel, .box, .surface, .invoice-card,
  .billing-card, .settings-card, .form-card {
    padding: 12px !important;
  }

  .plans-grid, .plan-grid, .pricing-grid { gap: 6px !important; }
  .plan-card, .pricing-card { padding: 8px !important; }
}