/* ============================================================
   bit-bank.io mobile patch — fixes responsive issues in newer
   sections (PDQ animation, funnels, launch promo, satoshi test,
   path cards, hero monogram). Appended to existing <style>.
   ============================================================ */

@media (max-width: 880px) {
  /* Hero monogram — push further off so it doesn't overlap CTAs on tablet */
  .h2-bg-mark { right: -8% !important; top: 28% !important; opacity: .35 !important; }
  .h2-bg-mark img { width: 220px !important; }

  /* PDQ stage — center and shrink slightly */
  .pdq-stage { padding: 22px 0 24px; max-width: 300px; }
  .pdq { width: 280px; }

  /* Trust marquee — reduce logo height on tablet */
  .trust-track img { height: 60px !important; }

  /* Path cards — single column with consistent height */
  .pth3-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .pth3-card { min-height: auto !important; }

  /* Card+Merchant — single column */
  .cm-grid { grid-template-columns: 1fr !important; }
  .cm-card { padding: 24px 18px !important; }

  /* Pricing tiers — 2x2 grid instead of 1x4 */
  .pricing-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .pricing-card { padding: 18px 14px !important; }

  /* Six pillars — single column */
  .srv3-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .srv3-card { padding: 22px 18px !important; }

  /* Layer-1 paired visuals — stack */
  .lyr1-paired { grid-template-columns: 1fr !important; gap: 18px; }

  /* Live Infrastructure — stack 3 cards */
  .lis-grid { grid-template-columns: 1fr !important; }

  /* Capabilities tier-2: 2 cols not 4 */
  .cap3-cols { grid-template-columns: 1fr 1fr !important; gap: 18px; }

  /* Comparison table — horizontal scroll */
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 700px; }
}

@media (max-width: 640px) {
  /* Hide hero monogram entirely on small mobile */
  .h2-bg-mark { display: none !important; }

  /* PDQ even smaller */
  .pdq { width: 240px; }
  .pdq-screen { height: 84px; }
  .pdq-tx-l1 { font-size: 9.5px; }
  .pdq-tx-l2 { font-size: 12px; }

  /* Hero h1 sizing */
  .hero.h2 .h2-h { font-size: clamp(34px, 9.5vw, 56px) !important; line-height: 1.05 !important; }
  .hero.h2 .h2-sub { font-size: 13px !important; }
  .hero.h2 .h2-eyebrow { font-size: 10px !important; letter-spacing: 1.4px !important; }

  /* CTAs stack full-width */
  .h2-ctas { flex-direction: column !important; gap: 10px !important; }
  .h2-ctas a, .h2-ctas button { width: 100% !important; justify-content: center !important; }

  /* Pricing — single column on phone */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* Capabilities — single column */
  .cap3-cols { grid-template-columns: 1fr !important; }

  /* Footer columns stack */
  .ft3-top { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 18px 28px !important; }
  .ft3-bot { padding: 16px 18px 22px !important; flex-direction: column; align-items: flex-start; }
  .ft3-disclosure { padding: 18px 18px 24px !important; font-size: 9px; }

  /* Funnel forms (card-signup, merchant-signup, custody-verify) — full width */
  #page-card-signup .form-grid,
  #page-merchant-signup .form-grid,
  #page-custody-verify .form-grid,
  #page-signup .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #page-card-signup input,
  #page-card-signup select,
  #page-merchant-signup input,
  #page-merchant-signup select,
  #page-merchant-signup textarea,
  #page-custody-verify input,
  #page-custody-verify select,
  #page-signup input,
  #page-signup select,
  #page-signup textarea {
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    padding: 12px 14px !important;
  }

  /* Launch promo banners — readable on phone */
  .promo-banner { font-size: 11.5px !important; padding: 12px 14px !important; letter-spacing: .6px !important; }
  .promo-counter { font-size: 13px !important; }

  /* Satoshi-test 3-step — stack */
  .satoshi-steps { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Stats row — 2x4 grid */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* Six pillars details on tap */
  .srv3-card { padding: 18px 14px !important; }
  .srv3-card .srv3-d { font-size: 12.5px !important; line-height: 1.55 !important; }

  /* Trust marquee small */
  .trust-track img { height: 48px !important; }
  .trust { padding: 18px 0 !important; }

  /* Headers in inner pages */
  .inner-page h1 { font-size: clamp(26px, 7vw, 38px) !important; }
  .inner-page h2 { font-size: clamp(20px, 5.5vw, 28px) !important; }

  /* All inline width override safety net for desktop containers */
  [style*="width:1240px"], [style*="width:1200px"], [style*="width:1180px"],
  [style*="width:1100px"], [style*="width:1080px"], [style*="width:1040px"],
  [style*="width:980px"], [style*="width:920px"], [style*="width:900px"],
  [style*="width:880px"], [style*="width:860px"], [style*="width:800px"],
  [style*="width:780px"], [style*="width:760px"], [style*="width:720px"],
  [style*="width:700px"], [style*="width:680px"], [style*="width:620px"],
  [style*="width:600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Tighten paddings on phone */
  .h2-wrap { padding: 88px 18px 64px !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }

  /* Nav — slim down */
  .nav-l img.n-logo { height: 28px !important; }
  .nav-r .n-cta { padding: 7px 14px !important; font-size: 12px !important; }
  .nav-r .n-cta-secondary { display: none !important; }

  /* Mobile burger — make tap target larger */
  .mob-burger { width: 44px !important; height: 44px !important; }

  /* PDQ keys can hide on very small screens (the screen is the focus anyway) */
  .pdq-keys { display: none !important; }
  .pdq { width: 220px !important; aspect-ratio: 220/300 !important; }
  .pdq-screen { height: 100px !important; flex: 1; }

  /* Card visual — shrink */
  .bbcard { transform: scale(.85); }

  /* Stats — 1 col */
  .stats-grid { grid-template-columns: 1fr !important; }

  /* All inline-style hardcoded width fallback for the smallest screens */
  [style*="width:540px"], [style*="width:520px"], [style*="width:500px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Reduce GPU-heavy animations on phones — battery + jank */
@media (max-width: 880px) {
  .pdq-tx-stage,
  .pdq-tx-spin,
  .pdq-tx-tick,
  .pdq-screen::after,
  .pdq-tap svg,
  .pdq-screen-status::before,
  .lyr1-mountain,
  .lyr1-vault-wm,
  .h2-bg-mark img {
    will-change: auto !important;
  }
  /* Drop expensive backdrop-filter */
  .h2-bg-mark, .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Respect prefers-reduced-motion across all newer animations */
@media (prefers-reduced-motion: reduce) {
  .pdq-tx-stage,
  .pdq-tx-spin,
  .pdq-tx-tick,
  .pdq-tx-dots::after,
  .lyr1-mountain,
  .lyr1-vault-wm,
  .lyr1-pano,
  .promo-shimmer,
  .h2-bg-mark img,
  .lis-card .live-pulse {
    animation: none !important;
    transform: none !important;
  }
}

/* Touch-friendly: min 44x44 tap targets for inner-page CTAs */
@media (max-width: 880px) and (pointer: coarse) {
  button, a.btn, .pth3-cta, .cm-card-cta, .srv3-card-l, .nav-r a {
    min-height: 44px;
  }
  .nl, .mob-lang { min-height: 40px; }
}