/*
 * BoxBinAlert™ — Mobile Stylesheet
 * mobile.css  |  Load LAST in <head>, after all page <style> blocks
 *
 * Goal: Dark theme stays. Fix readability, layout, tap targets, text size.
 * No background color changes — just make it easy to read and use on mobile.
 */

@media (max-width: 768px) {

  /* ── ROOT ── */
  :root { --nav-h: 56px !important; }

  /* ── BODY ── */
  body { overflow-x: hidden !important; font-size: 16px !important; }

  /* ── CONTAINERS ── */
  .container { padding: 0 16px !important; }

  /* ── HERO ── */
  .hero {
    padding: calc(var(--nav-h) + 28px) 16px 40px !important;
    min-height: auto !important;
  }

  .hero h1 {
    font-size: clamp(44px, 11vw, 68px) !important;
    line-height: 0.95 !important;
  }

  .hero-sub {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #bbb !important;
    margin-top: 18px !important;
  }

  .hero-eyebrow {
    font-size: 11px !important;
    padding: 5px 12px !important;
    margin-bottom: 18px !important;
  }

  .hero-demo-block {
    padding: 18px 14px 14px !important;
    margin-bottom: 20px !important;
  }

  .demo-svg { max-width: 100% !important; }

  .hero-cta {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .btn-primary {
    font-size: 18px !important;
    padding: 16px 28px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    min-height: 52px !important;
  }

  .btn-ghost {
    font-size: 14px !important;
    padding: 12px 0 !important;
    text-align: center !important;
    display: block !important;
  }

  .hero-stats {
    gap: 16px 24px !important;
    margin-top: 32px !important;
  }

  .stat-num  { font-size: clamp(28px, 8vw, 42px) !important; }
  .stat-label { font-size: 10px !important; letter-spacing: 0.12em !important; }

  .scroll-hint { display: none !important; }

  /* ── PAGE HEADERS ── */
  .page-header {
    padding: calc(var(--nav-h) + 24px) 16px 32px !important;
  }

  .page-header h1,
  .ph-title {
    font-size: clamp(38px, 10vw, 62px) !important;
    line-height: 0.94 !important;
  }

  .page-header p,
  .ph-sub {
    font-size: 15px !important;
    color: #888 !important;
    margin-top: 10px !important;
  }

  /* ── SECTION TITLES ── */
  .section-title {
    font-size: clamp(32px, 8vw, 52px) !important;
    line-height: 0.95 !important;
  }

  .section-h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }

  .section-body {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .section-note {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }

  /* ── MARQUEE ── */
  .problem-strip { padding: 12px 0 !important; }
  .marquee-track span { font-size: 13px !important; }

  /* ── PROBLEM SECTION ── */
  .problem-section { padding: 48px 0 !important; }

  .problem-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }

  .pstat-card  { padding: 22px 14px !important; }
  .pstat-num   { font-size: clamp(32px, 8vw, 52px) !important; }
  .pstat-label { font-size: 12px !important; color: #aaa !important; line-height: 1.4 !important; }

  .rx-callout {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 16px !important;
  }

  .rx-callout-title { font-size: clamp(20px, 5vw, 30px) !important; }
  .rx-callout-body  { font-size: 14px !important; color: #aaa !important; }

  .solution-bridge { padding: 24px 16px !important; }
  .solution-bridge-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .sb-title { font-size: 22px !important; }
  .sb-body  { font-size: 14px !important; }

  /* ── SENSORS SECTION ── */
  .sensors-section { padding: 48px 0 !important; }

  .sensors-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .sensor-card  { padding: 18px 14px !important; }
  .sensor-icon  { font-size: 28px !important; }
  .sensor-name  { font-size: 16px !important; }
  .sensor-desc  { font-size: 12px !important; color: #666 !important; }
  .sensor-tag   { font-size: 10px !important; }

  /* ── HOW IT WORKS ── */
  .how-section { padding: 48px 0 !important; }

  .how-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-top: 28px !important;
  }

  .how-visual { display: none !important; }

  .steps { gap: 20px !important; }

  .step     { gap: 14px !important; }
  .step-num { font-size: 36px !important; width: 34px !important; }
  .step-title { font-size: 18px !important; }
  .step-body  { font-size: 14px !important; color: #888 !important; }

  /* ── HW SPEC STRIP ── */
  .hw-strip { padding: 40px 0 !important; }

  .hw-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hw-card { padding: 24px 18px !important; }
  .hw-title { font-size: 22px !important; }

  .hw-divider {
    flex-direction: row !important;
    padding-top: 0 !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 8px 0 !important;
  }

  .hw-specs li { font-size: 13px !important; color: #888 !important; }

  /* ── FEATURES ── */
  .features-section { padding: 48px 0 !important; }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .feature { padding: 20px 16px !important; }
  .feature-title { font-size: 17px !important; }
  .feature-body  { font-size: 13px !important; color: #666 !important; }

  /* ── NO SUBSCRIPTION ── */
  .nosub-section { padding: 56px 16px !important; }

  .nosub-title {
    font-size: clamp(52px, 13vw, 80px) !important;
    line-height: 0.9 !important;
  }

  .nosub-body {
    font-size: 15px !important;
    color: #888 !important;
    margin-top: 20px !important;
  }

  .nosub-compare {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin-top: 40px !important;
  }

  .compare-col { max-width: 100% !important; padding: 24px 18px !important; }
  .compare-col-label { font-size: 13px !important; }
  .compare-item { font-size: 14px !important; color: #888 !important; padding: 8px 0 !important; }
  .compare-price { font-size: 36px !important; margin-top: 14px !important; }

  .nosub-cta { margin-top: 36px !important; }

  .nosub-badges {
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .nosub-badge { font-size: 12px !important; padding: 6px 12px !important; }

  /* ── USE CASES ── */
  .use-section { padding: 48px 0 !important; }

  .use-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .use-card  { padding: 22px 18px !important; }
  .use-title { font-size: 18px !important; }
  .use-body  { font-size: 14px !important; color: #888 !important; }
  .use-num   { font-size: 48px !important; }

  /* ── CTA SECTION ── */
  .cta-section { padding: 56px 16px !important; }

  .btn-white {
    font-size: 20px !important;
    padding: 16px 36px !important;
    min-height: 52px !important;
  }

  .cta-badges {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .badge { font-size: 12px !important; padding: 6px 12px !important; }

  /* ── PACKAGES SECTION ── */
  .packages-section { padding: 40px 0 32px !important; }

  .packages-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pkg-body   { padding: 20px 16px 0 !important; }
  .pkg-footer { padding: 14px 16px 20px !important; }
  .pkg-name   { font-size: 28px !important; }
  .pkg-desc   { font-size: 14px !important; }
  .pkg-price  { font-size: 44px !important; }

  .pkg-include-row { font-size: 13px !important; }

  .btn-cart {
    font-size: 16px !important;
    padding: 14px 16px !important;
    min-height: 50px !important;
  }

  /* ── SENSOR CHIPS ── */
  .sensor-chip {
    font-size: 13px !important;
    padding: 9px 12px !important;
    min-height: 40px !important;
  }

  /* ── ADD-ONS ── */
  .addons-section { padding: 32px 0 !important; }

  .addons-grid { grid-template-columns: 1fr !important; }

  .addon-card {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
    gap: 16px !important;
  }

  .addon-right   { text-align: left !important; min-width: unset !important; }
  .addon-name    { font-size: 22px !important; }
  .addon-desc    { font-size: 13px !important; }
  .addon-price   { font-size: 36px !important; }

  .btn-addon {
    padding: 13px 16px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }

  .custom-banner { flex-direction: column !important; padding: 20px 16px !important; }
  .custom-banner-body { font-size: 13px !important; }

  /* ── INDIVIDUAL UNITS ── */
  .units-section { padding: 32px 0 !important; }

  .units-grid { grid-template-columns: 1fr !important; }

  .unit-body   { padding: 18px 16px 0 !important; }
  .unit-footer { padding: 12px 16px 18px !important; }
  .unit-name   { font-size: 20px !important; }
  .unit-desc   { font-size: 14px !important; }
  .unit-price  { font-size: 36px !important; }

  .unit-features li { font-size: 13px !important; }

  .btn-buy {
    font-size: 16px !important;
    padding: 14px !important;
    min-height: 50px !important;
  }

  /* ── QTY CONTROLS ── */
  .qty-btn   { width: 40px !important; height: 44px !important; font-size: 20px !important; }
  .qty-value { font-size: 18px !important; }

  /* ── CART PAGE ── */
  .cart-wrap {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 60px !important;
    gap: 24px !important;
  }

  .order-sum { position: static !important; }

  .items-hd { display: none !important; }

  .cart-item {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }

  .item-img  { width: 60px !important; height: 60px !important; }
  .item-name { font-size: 16px !important; }
  .item-meta { font-size: 12px !important; }
  .item-total { font-size: 20px !important; }

  .sum-title { font-size: 24px !important; }
  .sum-amt   { font-size: 36px !important; }

  .btn-checkout {
    font-size: 18px !important;
    padding: 16px !important;
    min-height: 52px !important;
  }

  .trust-row { font-size: 13px !important; }

  .sug-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .sug-name { font-size: 14px !important; }
  .sug-price { font-size: 20px !important; }

  /* ── LOGIN CARD ── */
  .login-card {
    border-left: none !important;
    border-right: none !important;
  }

  .card-header, .card-body, .card-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .card-title { font-size: 36px !important; }

  /* ── COMING SECTION ── */
  .coming-section { padding: 40px 0 48px !important; }
  .coming-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .coming-card { padding: 18px 14px !important; }
  .coming-name { font-size: 15px !important; }

  /* ── TRUST STRIP ── */
  .trust-strip { gap: 12px !important; flex-wrap: wrap !important; }
  .trust-item  { font-size: 13px !important; }

  /* ── FOOTER ── */
  .site-footer {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 32px 16px !important;
  }

  .footer-links {
    justify-content: center !important;
    gap: 14px !important;
  }

  .footer-links a { font-size: 13px !important; }
  .footer-copy    { font-size: 12px !important; color: #444 !important; }
}

/* ── VERY SMALL (400px and below) ── */
@media (max-width: 400px) {

  .hero h1,
  .nosub-title { font-size: 40px !important; }

  .sensors-grid  { grid-template-columns: 1fr !important; }
  .problem-stats { grid-template-columns: 1fr !important; }
  .coming-grid   { grid-template-columns: 1fr !important; }
  .sug-grid      { grid-template-columns: 1fr !important; }

  .stat-num   { font-size: 26px !important; }
  .hero-stats { gap: 12px !important; }

  .btn-primary { font-size: 16px !important; }
  .btn-cart    { font-size: 15px !important; }
  .btn-buy     { font-size: 15px !important; }
}
