/* ------------------------------------------------------------------
   mobile.css — site-wide responsive rules.
   The pages are authored with inline styles as the desktop baseline.
   This sheet overrides them at narrow widths with !important so the
   HTML stays untouched. Linked from every page after the inline <style>.
   ------------------------------------------------------------------ */

html, body { overflow-x: hidden; }
img, iframe { max-width: 100%; }
.nav-toggle { display: none; }

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {

  /* Grids collapse to one column; 4-up stat / value grids go 2-up */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Flex rows inside sections may wrap */
  section [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap; }

  /* Section rhythm: tighter side gutters and vertical padding */
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding:6"], section[style*="padding:7"],
  section[style*="padding:8"], section[style*="padding:9"] {
    padding-top: 56px !important; padding-bottom: 60px !important;
  }
  section[style*="radial-gradient"] > div { padding: 52px 20px 58px !important; }
  footer { padding-top: 48px !important; }

  /* Type scale */
  h1 { font-size: 42px !important; line-height: 1.08 !important; }
  h2 { font-size: 32px !important; line-height: 1.1 !important; }
  section[style*="radial-gradient"] p { font-size: 16px !important; }

  /* Hero watermark: smaller and fainter so it never sits behind the headline */
  .ghost-emblem { width: 360px !important; opacity: .07 !important; right: -120px !important; left: auto !important; top: auto !important; bottom: -80px !important; transform: none !important; }

  /* Utility bar */
  .util-address { display: none !important; }
  .util-bar > div { padding: 8px 16px !important; }

  /* Header: compact brand, hamburger menu */
  header > div { padding: 12px 16px !important; gap: 12px !important; }
  header > div > a { gap: 11px !important; }
  header img[width="56"] { width: 44px !important; height: 44px !important; }
  .brand-name { font-size: 18px !important; }
  .brand-sub { display: none !important; }

  .nav-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: transparent; border: 1px solid #3a352e; border-radius: 8px;
    color: #f4eede; cursor: pointer; padding: 0;
  }
  #site-nav {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #1c1a18; border-bottom: 1px solid #322d27;
    box-shadow: 0 18px 30px rgba(0,0,0,.45);
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 6px 20px 18px;
  }
  #site-nav.open { display: flex !important; }
  #site-nav a { font-size: 16px !important; padding: 14px 2px; border-bottom: 1px solid #2a2622; }
  #site-nav a.cta-ox { margin-top: 14px; text-align: center; border-bottom: none; padding: 14px 20px; }

  /* Sell page: form card and tab bar */
  .form-grid { padding: 28px 18px !important; gap: 32px !important; }
  #tab-sell, #tab-request { padding: 13px 18px !important; font-size: 14px !important; }

  /* About page */
  .about-aside { position: static !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 29px !important; }
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .why-points { grid-template-columns: 1fr !important; }
  .ghost-emblem { width: 280px !important; }

  /* Hero / CTA button rows stack full-width */
  section[style*="radial-gradient"] a[style*="padding:1"] ,
  section a.cta-gold, section a.cta-ox { display: block !important; text-align: center; width: 100%; }

  /* Big stat numbers scale down */
  [style*="font-size:52px"] { font-size: 40px !important; }
}