/* Mobile / tablet optimizations. Loaded after site.css.
   The pages use inline styles, so these rules use !important + attribute
   selectors to override them below 820px. */

html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* Nav: burger hidden on desktop */
.nav-burger { display: none; }
.nav-panel { display: none; }

@media (max-width: 820px) {
  /* ---- Layout containers ---- */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  section.starfield:first-of-type { padding-top: 40px !important; }

  /* ---- Grids collapse to one column ---- */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Compact option pickers stay two-up */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 8px"] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Metrics band: 2x2, no dividers */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0px"] { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0px"] > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* Signup progress rail keeps its columns */
  .step-rail { grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; }
  /* Summary rows / à la carte table */
  [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1.6fr 1fr 1fr !important; }

  /* ---- Flex rows that must stack ---- */
  .row-stack { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .row-stack > * { max-width: 100% !important; }

  /* ---- Display type ---- */
  [style*="font-size: 88px"] { font-size: 38px !important; line-height: 1.08 !important; }
  [style*="font-size: 64px"] { font-size: 33px !important; line-height: 1.1 !important; }
  [style*="font-size: 56px"] { font-size: 31px !important; line-height: 1.1 !important; }
  [style*="font-size: 52px"] { font-size: 34px !important; }
  [style*="font-size: 48px"] { font-size: 29px !important; line-height: 1.12 !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; line-height: 1.15 !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; line-height: 1.15 !important; }
  [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 16px !important; }
  h1 [style*="padding: 0px 12px"], h1 span, h2 span { white-space: normal !important; }

  /* Big inner paddings */
  [style*="padding: 64px 56px"], [style*="padding: 48px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 28px"] { padding: 22px !important; }

  /* ---- Mascots / decorative absolutes off (they cause overflow) ---- */
  img[alt=""][style*="position: absolute"] { display: none !important; }

  /* ---- Forms: 16px avoids iOS zoom-on-focus ---- */
  .txt-input, select, textarea { font-size: 16px !important; }
  button { min-height: 44px; }

  /* ---- Modals / drawers ---- */
  [style*="max-width: 880px"] { max-height: 88vh !important; overflow-y: auto !important; border-radius: 14px !important; }
  [style*="width: 460px"] { width: 100% !important; max-width: 100% !important; }
  [style*="position: fixed"][style*="inset: 0px"] { padding: 0 !important; }

  /* ---- Logo strip ---- */
  .logos-strip { gap: 20px !important; justify-content: flex-start !important; }
  .logos-strip span { font-size: 16px !important; }

  /* ---- Nav ---- */
  .site-nav { padding-left: 20px !important; padding-right: 20px !important; flex-wrap: nowrap !important; }
  .nav-links, .nav-actions { display: none !important; }
  .nav-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; border: none;
    background: transparent; color: inherit; cursor: pointer;
  }
  .nav-panel { display: block; }
  .nav-panel-inner { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 20px; }
  .nav-panel-inner a { padding: 12px 0; font-family: var(--font-ui); font-size: 17px; font-weight: 500; }
  .nav-panel-inner .nav-panel-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .nav-panel-inner .nav-panel-cta button { width: 100%; }

  /* ---- Toast sits above thumb reach ---- */
  .toast { bottom: 20px; max-width: calc(100% - 40px); text-align: center; }
}

@media (max-width: 480px) {
  [style*="font-size: 88px"] { font-size: 34px !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr"] { font-size: 12px !important; }
}