/* Phone / small-tablet layout for the new-design pages. The pages use inline
   styles for their desktop layout, so these rules override them by attribute
   selector with !important. Loaded after each page's own <style>. */

img { max-width: 100%; }

@media (max-width: 800px) {
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  /* Side gutters: 64px -> 20px, keeping each block's own top/bottom padding. */
  [style*="padding"][style*="64px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 64px"] { padding: 32px 20px !important; }
  [style*="padding: 96px 64px"], [style*="padding: 88px 64px"], [style*="padding: 120px 64px"],
  [style*="padding: 80px 64px"], [style*="padding: 72px 64px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 72px 64px 8px"] { padding-bottom: 8px !important; }
  [style*="padding: 40px 48px"] { padding: 28px 22px !important; }

  /* Navigation: logo on the first line, links wrapping beneath it. */
  [style*="height: 72px"] { height: auto !important; flex-wrap: wrap; padding-top: 12px !important; padding-bottom: 12px !important; row-gap: 10px; }
  [style*="gap: 36px"] { flex-wrap: wrap; gap: 8px 18px !important; width: 100%; }
  .feedback-dropdown .feedback-menu { display: none !important; }

  /* Side-by-side blocks stack. */
  [style*="gap: 56px"], [style*="gap: 40px"][style*="space-between"], [style*="gap: 32px"][style*="space-between"] {
    flex-direction: column; align-items: stretch !important; gap: 24px !important;
  }
  [style*="flex: 0 0 540px"], [style*="flex: 0 0 220px"] { flex: 0 0 auto !important; width: 100%; box-sizing: border-box; }
  [style*="width: 560px"] { width: 100% !important; box-sizing: border-box; }
  [style*="width: 440px"] { width: 100% !important; max-width: 440px; box-sizing: border-box; padding-left: 22px !important; padding-right: 22px !important; }
  [style*="gap: 14px"], [style*="gap: 16px"] { flex-wrap: wrap; }
  [style*="white-space: nowrap"] { white-space: normal !important; text-align: center; }

  /* Grids. */
  [style*="repeat(4, minmax(0, 1fr))"], [style*="repeat(3, 1fr)"], [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="1fr 140px 160px"] { grid-template-columns: minmax(0, 1fr) 64px 72px !important; }
  [style*="1fr 140px 160px"] > div { padding-left: 12px !important; padding-right: 8px !important; font-size: 13.5px !important; }
  [style*="1fr 140px 160px"] > div[style*="text-align: center"] { padding-left: 4px !important; padding-right: 4px !important; }

  /* Headlines. */
  [style*="font-size: 46px"] { font-size: 34px !important; letter-spacing: -0.8px !important; }
  [style*="font-size: 40px"], [style*="font-size: 36px"] { font-size: 28px !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 25px !important; }
  h1 { overflow-wrap: anywhere; }

  /* Forms and members dashboard. */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { max-width: 100%; box-sizing: border-box; font-size: 16px; }
  #dashboard-content #wrapper { flex-direction: column; }
  #dashboard-content #second { padding: 20px 18px !important; width: 100%; box-sizing: border-box; }
  table { max-width: 100%; }
  #page-content { padding: 24px 18px !important; }
  #page-content table, #page-content tbody, #page-content tr, #page-content td { display: block; width: 100% !important; box-sizing: border-box; }
  #page-content table td { padding: 5px 0 !important; }
  #page-content .g-recaptcha, #page-content iframe { max-width: 100%; }
}

@media (max-width: 480px) {
  [style*="repeat(4, minmax(0, 1fr))"], [style*="repeat(3, 1fr)"], [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="font-size: 46px"] { font-size: 30px !important; }
}