/* Phone presentation only. Keep the established tablet/desktop cascade intact.
   Match the existing hero/dashboard breakpoint; scope page rules so they also
   override template-local styles without changing those larger layouts. */
@media (max-width: 640px) {
  html, body { overflow-x: visible; }
  body { height: auto; background-repeat: no-repeat; }
  .site-main { padding: 0 14px 30px; overflow-wrap: anywhere; }
  .topbar { position: relative; }
  .topbar .topbar__inner {
    width: calc(100% - 28px);
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 0 14px;
  }
  .brand-lockup { align-self: center; }
  .topbar .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    gap: 8px;
  }
  .nav > a, .nav .userdrop__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 4px;
    white-space: normal;
    text-align: center;
    overflow-wrap: normal;
  }
  .topbar .nav a.nav__listing { padding: 10px 8px; }
  .nav > a { flex-wrap: wrap; }
  .nav .badge { flex-shrink: 0; }
  .nav .userdrop { grid-column: 1 / -1; justify-content: flex-end; min-width: 0; }
  .nav .userdrop__btn { box-sizing: border-box; max-width: 100%; }
  .nav .userdrop__name { min-width: 0; }
  .nav .userdrop__menu { max-width: calc(100vw - 28px); }
  .nav .userdrop__item { min-height: 44px; }

  /* One page gutter, not a gutter inside another gutter. */
  .site-main .content-wrap,
  .site-main .ld-wrap,
  .site-main .notifications-page,
  .site-main .legal-container { padding-left: 0; padding-right: 0; }
  .site-main .dash-wrap { padding-left: 0 !important; padding-right: 0 !important; } /* existing inline gutters */
  .site-main .legal-container { margin: 28px auto; }
  .site-main .home-search form { width: 100%; }
  .site-main .home-search { padding: 16px 0; }
  .site-main .home-search .site-search { margin-bottom: 0; }
  .site-main .product-grid { padding: 0; }
  .site-main .product-grid, .site-main .policy-grid { grid-template-columns: minmax(0, 1fr); }
  .site-main .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-main .card, .site-main .product-tile, .site-main .tile,
  .site-main .profile-card, .site-main .tier-card { min-width: 0; }
  .site-main .tile-footer, .site-main .product-tile__meta { flex-wrap: wrap; gap: 8px 12px; }
  .site-main .empty-state { padding: 22px 14px; }

  .site-main .launch-hero__aside { display: flex; align-items: stretch; }
  .site-main .launch-hero__main { min-width: 0; }
  .site-main .launch-hero__panel { padding: 24px 16px; }
  .site-main .launch-path { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .site-main .launch-path__icon { width: 44px; height: 44px; }
  .site-main .launch-signup { width: 100%; padding: 20px 14px; }
  .site-main .launch-trust { padding: 14px 12px; }
  .site-main .launch-trust span { font-size: .875rem; }
  .site-main .launch-trust strong { font-size: .9375rem; }

  .site-main h1:not(.launch-hero__title) { font-size: 1.75rem; line-height: 1.2; }
  .site-main .ld-card { padding: 14px; }
  .site-main .ld-meta .pill { max-width: 100%; min-width: 0; }
  .site-main .academic-meta { display: grid; gap: 8px; }
  .site-main .academic-meta span { min-width: 0; display: block; }
  .site-main .ld-actions { flex-direction: column; align-items: stretch; }
  .site-main .ld-actions > *, .site-main .ld-actions form .ld-btn { width: 100%; }
  .site-main .pv-heading { flex-wrap: wrap; }
  .site-main .pv-heading form { margin: 0; }
  .site-main .pv-rotate { min-height: 44px; }
  .site-main .pv-lock-banner { width: calc(100vw - 56px); padding: 16px; }
  .site-main .pv-lock-banner h3 { font-size: 1.2rem; }
  .site-main .share-modal__close { min-width: 44px; min-height: 44px; }

  /* Intrinsic input/fieldset widths must not dictate the phone's width. */
  .site-main fieldset { min-width: 0; max-width: 100%; }
  .site-main legend { max-width: 100%; }
  .site-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .site-main select, .site-main textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    font-size: 1rem;
  }
  .site-main select, .site-main input[type="file"] { width: 100%; }
  .site-main button, .site-main .btn, .site-main .ld-btn, .site-main .tier-cta {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .site-main .btn, .site-main .ld-btn, .site-main .filter-btn,
  .site-main .tab { min-height: 44px; text-align: center; }
  .site-main .filter-btn { display: inline-flex; align-items: center; }
  .site-main .support-form { padding: 16px; }
  .site-main .legal-container ul, .site-main .legal-container ol { margin-left: 0; }
  .site-main .stripe-step, .site-main .stripe-security { padding: 16px; }
  .site-main .stripe-action .btn { width: 100%; padding: 14px; }
  .site-main .verification-modal__card { padding: 18px; max-height: calc(100dvh - 40px); overflow-y: auto; }
  .site-main .verification-modal__card button { width: 100%; margin: 8px 0 0; }

  .site-main .dash-head { flex-wrap: wrap; gap: 16px; }
  .site-main .dash-actions, .site-main .earnings-actions { width: 100%; flex-wrap: wrap; }
  .site-main .earnings-actions > *, .site-main .earnings-actions .btn { width: 100%; }
  .site-main .earnings-actions .btn { height: auto; padding: 12px; }
  .site-main .panel-body { padding: 12px; }
  .site-main .dash-wrap .grid { grid-template-columns: minmax(0, 1fr); }
  .site-main .tile-links .link, .site-main .tile-links .danger-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .site-main .notification-card { flex-direction: column; gap: 12px; padding: 14px; }
  .site-main .notification-main { min-width: 0; }
  .site-main .notification-meta { text-align: left; white-space: normal; }
  .site-main nav[aria-label$="pages"], .site-main .pagination { flex-wrap: wrap; }
  .site-main .earnings-stats { grid-template-columns: minmax(0, 1fr) !important; } /* inline 4/5 columns */
  .site-main .mobile-table-scroll { overflow-x: auto; }
  .site-main .mobile-table-scroll table { min-width: 580px; }

  .site-main .wrap .card { padding: 16px; }
  .site-main .wrap .row { flex-direction: column; align-items: stretch; }
  .site-main .wrap .item, .site-main .wrap .summary { min-width: 0; width: 100%; flex: auto; }
  .site-main .wrap .links { flex-direction: column; }
  .site-main main.receipt-wrap { width: 100%; }
  .site-main .receipt-paper { padding: 16px; }
  .site-main .receipt-hero, .site-main .receipt-item { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-main .receipt-logo { max-width: 100%; }
  .site-main .receipt-status { text-align: left; }
  .site-main .receipt-status strong { max-width: none; }
  .site-main .receipt-total, .site-main .receipt-actions { flex-wrap: wrap; }
  .site-main .receipt-action { min-height: 44px; }
  .pilot-feedback-wrap, .footer .container { width: calc(100% - 28px); }
  .footer__links { gap: 4px 16px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 520px) {
  .site-main .grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* The existing compact header runs to 700px. Its non-shrinking nav otherwise
   exceeds the viewport just above the phone layout, even with a short name. */
@media (min-width: 641px) and (max-width: 700px) {
  .topbar .nav { flex: 1 1 100%; min-width: 0; }
}