/* ═══════════════════════════════════════════════════════════════
   PIXELOS MOBILE — Apple.com Accessories Page Inspired
   Reference: apple.com/in/shop/accessories/all
   
   KEY DESIGN CUES FROM APPLE ACCESSORIES PAGE:
   • Clean white bg with #f5f5f7 alternating sections
   • Full-width product cards with generous white space
   • Product names: tight, bold, black #1d1d1f
   • Descriptions: light #6e6e73 secondary text
   • "Learn more >" blue links in Apple's signature style
   • Pill CTA buttons: 980px border-radius, #0071e3 blue
   • Section headers: left-aligned on mobile, big bold title + blue "Shop all" link
   • Horizontal scrolling product carousels on mobile
   • Category filter pills: horizontal scroll, rounded, #e8e8ed bg
   • Search bar: big rounded input, prominent
   • Generous padding: 20px sides minimum
   • Card radius: 18-22px, subtle shadow or border
   • Bottom benefit tiles: icon + title + link, stacked
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════
   TABLET (≤860px) — Gentle reflow
   ══════════════════════════════════════ */
@media (max-width: 860px) {
  .s-row-2 { grid-template-columns: 1fr !important; }
  .pc-main { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pc-config { position: relative !important; top: auto !important; }
  .s-prov-grid { grid-template-columns: 1fr 1fr !important; }
  .ns-xray-demo, .ns-blink-demo { grid-template-columns: 1fr !important; }
  .pricing-cards { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE (≤768px) — Full Apple Accessories Treatment
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ═══ GLOBAL ═══ */
  .px-page {
    background: #fff !important;
    -webkit-text-size-adjust: 100% !important;
  }
  .px-page, body { overflow-x: hidden !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║                                                           ║
     ║   1. PIXELOS SUITE — Apple Accessories Main Page Style    ║
     ║                                                           ║
     ╚═══════════════════════════════════════════════════════════╝ */

  /* ─────────────────────────────────────
     HERO — Apple Accessories Hero Banner
     Large centered text, clean white bg
     ───────────────────────────────────── */
  .s-hero {
    min-height: auto !important;
    padding: 110px 24px 64px !important;
    background: #fbfbfd !important;
    justify-content: flex-start !important;
  }
  .s-hero::before, .s-hero::after { display: none !important; }
  .s-hero-content { max-width: 100% !important; }

  .s-hero-badge {
    font-size: 0.6rem !important;
    letter-spacing: 2px !important;
    padding: 5px 14px !important;
    margin-bottom: 20px !important;
    background: rgba(0,113,227,0.06) !important;
    border: 1px solid rgba(0,113,227,0.1) !important;
  }

  .s-hero-title {
    font-size: 2.6rem !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 14px !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
  }

  .s-hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #6e6e73 !important;
    margin: 0 auto 32px !important;
    max-width: 100% !important;
    font-weight: 400 !important;
  }

  .s-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 15px 30px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border-radius: 980px !important;
    background: #0071e3 !important;
    color: #fff !important;
    width: auto !important;
    min-width: 200px !important;
    letter-spacing: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .s-hero-cta i { font-size: 0.7rem !important; }

  .s-hero-cta-ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 30px !important;
    font-size: 0.88rem !important;
    border-radius: 980px !important;
    margin-top: 12px !important;
    width: auto !important;
    min-width: 200px !important;
  }

  .s-scroll-hint { display: none !important; }

  /* ─────────────────────────────────────
     PILLARS — Apple "Meet your match" style
     Clean sections, centered text
     ───────────────────────────────────── */
  .s-pillars { padding: 0 !important; }
  .s-pillar {
    padding: 56px 24px !important;
    border-top: 1px solid #d2d2d7 !important;
  }
  .s-pillar:nth-child(even) { background: #f5f5f7 !important; }
  .s-pillar-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: 1.2rem !important;
    margin: 0 auto 20px !important;
  }
  .s-pillar-inner h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 10px !important;
    color: #1d1d1f !important;
    line-height: 1.15 !important;
  }
  .s-pillar-inner p {
    font-size: 0.88rem !important;
    color: #6e6e73 !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
  }

  /* ─────────────────────────────────────
     FILTER TABS — Apple Category Pills
     Horizontal scroll, rounded pills
     Like "Browse by Product" on accessories page
     ───────────────────────────────────── */
  .s-products {
    padding: 56px 0 0 !important;
    background: #f5f5f7 !important;
  }
  .s-products-header {
    text-align: left !important;
    padding: 0 24px !important;
    margin-bottom: 24px !important;
  }
  .s-eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 8px !important;
    color: #6e6e73 !important;
  }
  .s-title {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1d1d1f !important;
    line-height: 1.1 !important;
  }
  .s-title-dim { color: #86868b !important; }
  .s-subtitle {
    font-size: 0.88rem !important;
    color: #6e6e73 !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    text-align: left !important;
    line-height: 1.5 !important;
  }

  .s-tabs {
    top: 48px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 0.5px solid #d2d2d7 !important;
  }
  .s-tabs-inner {
    justify-content: flex-start !important;
    gap: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 20px !important;
    scrollbar-width: none !important;
  }
  .s-tabs-inner::-webkit-scrollbar { display: none !important; }
  .s-tab {
    padding: 11px 16px !important;
    font-size: 0.76rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    border-bottom: 2px solid transparent !important;
  }
  .s-tab.active {
    color: #1d1d1f !important;
    font-weight: 600 !important;
    border-bottom-color: #1d1d1f !important;
  }

  /* ─────────────────────────────────────
     PRODUCT CARDS — Apple Accessories Card Style
     White cards, rounded corners, 
     product icon, clean typography,
     "Learn more >" + pill CTA
     ───────────────────────────────────── */
  .s-grid {
    padding: 8px 20px 20px !important;
    max-width: 100% !important;
  }
  .s-row {
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .s-row-1,
  .s-row-2 {
    grid-template-columns: 1fr !important;
  }

  .s-card {
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
  }

  .s-card-visual {
    min-height: 160px !important;
    padding: 32px 24px 12px !important;
    background: #fbfbfd !important;
    position: relative !important;
  }
  .s-card-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 1.4rem !important;
    background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(88,86,214,0.06)) !important;
    color: #0071e3 !important;
  }
  .s-card-badge {
    top: 14px !important;
    left: 20px !important;
    font-size: 0.55rem !important;
    color: #bf4800 !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
  }

  .s-card-info {
    padding: 16px 22px 28px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .s-card-info h2 {
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #1d1d1f !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
  }
  .s-card-tagline {
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  .s-card-price {
    font-size: 0.78rem !important;
    color: #6e6e73 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  /* Card links — Apple "Learn more >" + Pill CTA */
  .s-card-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .s-card-link {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: #0071e3 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .s-card-link:hover { text-decoration: underline !important; }
  .s-card-link i { font-size: 0.48rem !important; }

  .s-card-link.primary {
    background: #0071e3 !important;
    color: #fff !important;
    padding: 9px 20px !important;
    border-radius: 980px !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
  }
  .s-card-link.primary:hover {
    background: #0077ed !important;
    text-decoration: none !important;
  }

  /* ─────────────────────────────────────
     HOW IT WORKS — Clean numbered steps
     ───────────────────────────────────── */
  .s-how {
    padding: 56px 0 48px !important;
    background: #fff !important;
  }
  .s-how-header {
    text-align: left !important;
    margin-bottom: 36px !important;
    padding: 0 24px !important;
  }
  .s-steps { padding: 0 24px !important; max-width: 100% !important; }
  .s-step {
    grid-template-columns: 44px 1fr !important;
    gap: 14px !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid #d2d2d7 !important;
  }
  .s-step:last-child { border-bottom: none !important; }
  .s-step-num {
    font-size: 2rem !important;
    letter-spacing: -1px !important;
  }
  .s-step-body h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #1d1d1f !important;
  }
  .s-step-body p {
    font-size: 0.82rem !important;
    color: #6e6e73 !important;
    line-height: 1.5 !important;
  }

  /* ─────────────────────────────────────
     SPECS — Apple "Under the hood" numbers
     ───────────────────────────────────── */
  .s-specs { padding: 56px 0 !important; background: #f5f5f7 !important; }
  .s-specs-header {
    text-align: left !important;
    margin-bottom: 36px !important;
    padding: 0 24px !important;
  }
  .s-specs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding: 0 24px !important;
  }
  .s-spec { text-align: center !important; }
  .s-spec-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
  }
  .s-spec-label {
    font-size: 0.76rem !important;
    color: #6e6e73 !important;
    line-height: 1.4 !important;
  }

  /* ─────────────────────────────────────
     ECOSYSTEM — Apple "More to Explore" tiles
     ───────────────────────────────────── */
  .s-eco { padding: 56px 0 !important; background: #fff !important; }
  .s-eco-header {
    text-align: left !important;
    margin-bottom: 32px !important;
    padding: 0 24px !important;
  }
  .s-eco-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 20px !important;
  }
  .s-eco-card {
    padding: 28px 22px !important;
    border-radius: 16px !important;
    background: #f5f5f7 !important;
    text-align: left !important;
  }
  .s-eco-card-icon {
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    margin: 0 0 14px !important;
  }
  .s-eco-card h3 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin-bottom: 6px !important;
  }
  .s-eco-card p {
    font-size: 0.82rem !important;
    color: #6e6e73 !important;
    line-height: 1.5 !important;
  }

  /* ─────────────────────────────────────
     CTA — Apple clean centered CTA
     Like "AirTag" section on accessories page
     ───────────────────────────────────── */
  .s-cta {
    padding: 56px 0 !important;
    background: #f5f5f7 !important;
  }
  .s-cta h2 {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    padding: 0 24px !important;
    color: #1d1d1f !important;
    margin-bottom: 10px !important;
    line-height: 1.12 !important;
  }
  .s-cta p {
    font-size: 0.88rem !important;
    padding: 0 24px !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    color: #6e6e73 !important;
    line-height: 1.5 !important;
  }
  .s-cta .s-hero-cta {
    margin: 0 24px !important;
  }

  /* ─────────────────────────────────────
     SHARED LAYOUT — Apple widths & spacing
     ───────────────────────────────────── */
  .s-wrap { padding: 0 24px !important; max-width: 100% !important; }
  .s-wrap-wide { padding: 0 20px !important; max-width: 100% !important; }
  .s-wrap-narrow { padding: 0 24px !important; max-width: 100% !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  2. PIXELOS CREATE — Tool page                           ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .pc-hero { padding: 100px 24px 36px !important; }
  .pc-hero h1 { font-size: 2rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .pc-hero p { font-size: 0.88rem !important; max-width: 100% !important; color: #6e6e73 !important; }
  .pc-badge { font-size: 0.6rem !important; margin-bottom: 14px !important; }
  .pc-container { padding: 0 20px !important; }
  .pc-main {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-bottom: 48px !important;
  }
  .pc-config {
    position: relative !important;
    top: auto !important;
    border-radius: 18px !important;
    padding: 22px 20px !important;
  }
  .pc-config-title { font-size: 0.62rem !important; letter-spacing: 2px !important; color: #6e6e73 !important; }
  .pc-sizes { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .pc-size-btn {
    padding: 10px 6px !important;
    font-size: 0.65rem !important;
    border-radius: 10px !important;
  }
  .pc-size-btn strong { font-size: 0.78rem !important; }
  .pc-group { margin-bottom: 16px !important; }
  .pc-label { font-size: 0.76rem !important; color: #1d1d1f !important; font-weight: 500 !important; }
  .pc-select, .pc-input, .pc-textarea {
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    border: 1px solid #d2d2d7 !important;
    background: #fff !important;
  }
  .pc-custom-row { flex-direction: column !important; gap: 8px !important; }
  .pc-upload { border-radius: 14px !important; padding: 22px 16px !important; }
  .pc-mode-toggle { border-radius: 12px !important; padding: 3px !important; gap: 3px !important; }
  .pc-mode-btn { padding: 9px 14px !important; font-size: 0.75rem !important; border-radius: 10px !important; }
  .pc-generate {
    width: 100% !important;
    padding: 15px 28px !important;
    font-size: 0.88rem !important;
    border-radius: 980px !important;
    font-weight: 600 !important;
    background: #0071e3 !important;
    color: #fff !important;
  }
  .pc-preview { border-radius: 18px !important; min-height: 280px !important; }
  .pc-preview-head { padding: 14px 18px !important; }
  .pc-result { padding: 14px !important; }
  .pc-gen-image-wrap { border-radius: 12px !important; overflow: hidden !important; }
  .pc-waiting-screen { padding: 28px 20px !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  3. PIXELOS INSPECT — Quality inspector                  ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .qi-hero { padding: 100px 24px 36px !important; }
  .qi-hero h1 { font-size: 2rem !important; letter-spacing: -0.03em !important; color: #1d1d1f !important; font-weight: 700 !important; }
  .qi-hero p { font-size: 0.88rem !important; color: #6e6e73 !important; }
  .qi-badge { font-size: 0.6rem !important; margin-bottom: 14px !important; }
  .qi-container { padding: 0 20px !important; }
  .qi-upload-section { padding: 0 20px !important; }
  .qi-upload-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .qi-upload-card { border-radius: 18px !important; padding: 18px 16px !important; }
  .qi-card-header { flex-direction: column !important; gap: 6px !important; }
  .qi-dropzone { border-radius: 14px !important; padding: 24px 16px !important; }
  .qi-vs-badge { width: 32px !important; height: 32px !important; font-size: 0.65rem !important; }
  .qi-action-bar { flex-direction: column !important; gap: 8px !important; padding: 14px !important; }
  .qi-analyze {
    width: 100% !important;
    padding: 15px 28px !important;
    font-size: 0.88rem !important;
    border-radius: 980px !important;
    font-weight: 600 !important;
    background: #0071e3 !important;
    color: #fff !important;
  }
  .qi-how-strip { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 20px !important; }
  .qi-how-card { padding: 18px 12px !important; border-radius: 14px !important; }
  .qi-how-num { font-size: 1.3rem !important; }
  .qi-results-section { padding: 20px 20px !important; }
  .qi-results-header { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
  .qi-result-actions { flex-direction: column !important; gap: 8px !important; }
  .qi-action-btn {
    width: 100% !important;
    padding: 13px 18px !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }
  .qi-tech-table { font-size: 0.78rem !important; overflow-x: auto !important; }
  .qi-tech-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 14px !important; }
  .qi-error-card { padding: 22px 16px !important; border-radius: 14px !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  4. PIXELOS CONNECT — Provider search                    ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .s-search { padding: 20px 0 !important; }
  .s-search-header { padding: 0 24px !important; margin-bottom: 16px !important; text-align: left !important; }
  .s-search-box { padding: 0 20px !important; max-width: 100% !important; }
  .s-search-box input, .s-search-input {
    font-size: 0.95rem !important;
    padding: 13px 16px 13px 40px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: 1px solid #d2d2d7 !important;
    background: #f5f5f7 !important;
  }
  .s-search-icon { left: 14px !important; }

  .s-filter-bar { padding: 0 20px !important; }
  .s-filter-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .s-filter-inner::-webkit-scrollbar { display: none !important; }
  .s-filter-tab {
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    font-size: 0.76rem !important;
    border-radius: 980px !important;
    white-space: nowrap !important;
    background: #e8e8ed !important;
    color: #1d1d1f !important;
    border: none !important;
  }
  .s-filter-tab.active {
    background: #1d1d1f !important;
    color: #fff !important;
  }

  .s-providers { padding: 0 !important; }
  .s-providers-header { padding: 0 24px !important; text-align: left !important; }
  .s-prov-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 20px !important; }
  .s-prov-card { border-radius: 18px !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; }
  .s-prov-accent { height: 3px !important; }
  .s-prov-body { padding: 20px 18px !important; }
  .s-prov-top { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .s-prov-avatar { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
  .s-prov-name { font-size: 1rem !important; font-weight: 600 !important; color: #1d1d1f !important; }
  .s-prov-tags { flex-wrap: wrap !important; gap: 5px !important; margin: 10px 0 !important; }
  .s-prov-tag { font-size: 0.65rem !important; padding: 4px 10px !important; border-radius: 980px !important; background: #f5f5f7 !important; }
  .s-prov-meta { flex-wrap: wrap !important; gap: 10px !important; margin: 10px 0 !important; }
  .s-prov-meta-item { font-size: 0.72rem !important; color: #6e6e73 !important; }
  .s-prov-actions { flex-direction: column !important; gap: 8px !important; margin-top: 14px !important; }
  .s-prov-btn {
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: 500 !important;
  }

  .s-guarantee { padding: 48px 0 !important; }
  .s-guarantee-inner { padding: 0 24px !important; }
  .s-g-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .s-g-item { border-radius: 14px !important; padding: 22px 18px !important; background: #f5f5f7 !important; }

  .s-join { padding: 48px 0 !important; }
  .s-join-inner { padding: 28px 20px !important; border-radius: 18px !important; margin: 0 20px !important; }
  .s-join-actions { flex-direction: column !important; gap: 8px !important; }
  .s-join-actions .s-prov-btn { width: 100% !important; }

  /* ── Connect: Escrow Visual ── */
  .s-escrow-visual { padding: 48px 0 !important; }
  .s-milestone-tracker { padding: 0 20px !important; }
  .s-milestone-bar { height: 6px !important; border-radius: 10px !important; margin-bottom: 24px !important; }
  .s-milestones { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .s-milestone-card {
    padding: 22px 14px !important; border-radius: 16px !important;
    background: #f5f5f7 !important;
  }
  .s-milestone-pct { font-size: 1.6rem !important; }
  .s-milestone-label { font-size: 0.76rem !important; }
  .s-milestone-desc { font-size: 0.7rem !important; }

  /* ── Connect: QR Code Section ── */
  .s-qr-section { padding: 48px 0 !important; }
  .s-qr-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 20px !important; }
  .s-qr-card {
    padding: 28px 20px !important; border-radius: 18px !important;
    text-align: left !important;
  }
  .s-qr-card-icon {
    width: 52px !important; height: 52px !important; border-radius: 14px !important;
    margin: 0 0 16px !important; font-size: 1.2rem !important;
  }
  .s-qr-card h4 { font-size: 1rem !important; }
  .s-qr-card p { font-size: 0.82rem !important; }
  .s-qr-persona { font-size: 0.58rem !important; margin-bottom: 12px !important; }

  /* ── Connect: SLA Section ── */
  .s-sla-section { padding: 48px 0 !important; }
  .s-sla-flow { grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 20px !important; }
  .s-sla-node {
    padding: 22px 18px !important; border-radius: 16px !important;
    text-align: left !important;
  }
  .s-sla-node::after { display: none !important; }
  .s-sla-node-icon {
    width: 44px !important; height: 44px !important; border-radius: 12px !important;
    margin: 0 0 12px !important; font-size: 1rem !important;
  }
  .s-sla-node h4 { font-size: 0.88rem !important; }
  .s-sla-node p { font-size: 0.76rem !important; }
  .s-sla-time { font-size: 0.58rem !important; margin-top: 8px !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  5. PIXELOS NEURAL SCAN — Marketing page                 ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .ns-hero { padding: 100px 24px 48px !important; min-height: auto !important; }
  .ns-hero h1 { font-size: 2rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .ns-hero-badge { font-size: 0.6rem !important; padding: 5px 14px !important; }
  .ns-hero-sub { font-size: 0.88rem !important; max-width: 100% !important; color: #6e6e73 !important; }
  .ns-hero-cta {
    padding: 15px 30px !important;
    font-size: 0.88rem !important;
    width: auto !important;
    min-width: 200px !important;
    border-radius: 980px !important;
    font-weight: 600 !important;
  }

  .ns-features-nav { top: 48px !important; padding: 0 !important; }
  .ns-features-nav-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 20px !important;
    gap: 0 !important;
    scrollbar-width: none !important;
  }
  .ns-features-nav-inner::-webkit-scrollbar { display: none !important; }
  .ns-fnav-item { flex-shrink: 0 !important; padding: 11px 14px !important; font-size: 0.72rem !important; white-space: nowrap !important; }

  .ns-section { padding: 48px 0 !important; }
  .ns-section-header { padding: 0 24px !important; margin-bottom: 28px !important; text-align: left !important; }
  .ns-section-header h2 { font-size: 1.5rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .ns-section-header p { font-size: 0.85rem !important; max-width: 100% !important; color: #6e6e73 !important; }

  .ns-xray-demo { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 20px !important; }
  .ns-xray-canvas { border-radius: 16px !important; min-height: 180px !important; }
  .ns-xray-controls { flex-wrap: wrap !important; gap: 5px !important; padding: 10px !important; }
  .ns-xray-ctrl-btn { padding: 7px 12px !important; font-size: 0.7rem !important; border-radius: 8px !important; }
  .ns-telemetry { border-radius: 16px !important; padding: 18px !important; }

  .ns-info-row { grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 20px !important; }
  .ns-info-card { border-radius: 16px !important; padding: 22px 18px !important; background: #f5f5f7 !important; text-align: left !important; }
  .ns-info-card-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; margin-bottom: 12px !important; }

  .ns-blink-demo { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 20px !important; }
  .ns-blink-feed { border-radius: 16px !important; min-height: 180px !important; }
  .ns-blink-panel { border-radius: 16px !important; padding: 18px !important; }
  .ns-blink-state-row { flex-direction: column !important; gap: 6px !important; }
  .ns-blink-patterns { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .ns-blink-pat-btn { padding: 12px 8px !important; font-size: 0.7rem !important; border-radius: 10px !important; }
  .ns-blink-action { padding: 14px !important; border-radius: 12px !important; }

  .ns-diag-demo { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 20px !important; }
  .ns-diag-feed { border-radius: 16px !important; min-height: 180px !important; }
  .ns-diag-report { border-radius: 16px !important; padding: 18px !important; }
  .ns-health-item { padding: 10px 0 !important; }
  .ns-scan-btn {
    width: 100% !important;
    padding: 15px 28px !important;
    font-size: 0.85rem !important;
    border-radius: 980px !important;
    font-weight: 600 !important;
  }
  .ns-fourier-wrap { border-radius: 14px !important; padding: 14px !important; }

  .ns-map-demo { padding: 0 20px !important; }
  .ns-map-wall { border-radius: 16px !important; min-height: 200px !important; }
  .ns-map-btn { width: 100% !important; padding: 15px 28px !important; font-size: 0.85rem !important; border-radius: 980px !important; }
  .ns-map-status { flex-direction: column !important; gap: 6px !important; padding: 10px 14px !important; border-radius: 12px !important; }

  .ns-specs { grid-template-columns: 1fr 1fr !important; gap: 18px !important; padding: 0 24px !important; }
  .ns-spec { text-align: center !important; }
  .ns-spec-num { font-size: 1.8rem !important; font-weight: 800 !important; }
  .ns-spec-label { font-size: 0.72rem !important; color: #6e6e73 !important; }

  .ns-cta-section { padding: 48px 24px !important; text-align: center !important; }
  .ns-cta-section h2 { font-size: 1.65rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; }
  .ns-cta-section p { font-size: 0.85rem !important; max-width: 100% !important; color: #6e6e73 !important; }
  .ns-cta-buttons { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .ns-cta-primary, .ns-cta-ghost {
    width: auto !important;
    min-width: 200px !important;
    padding: 15px 28px !important;
    font-size: 0.85rem !important;
    border-radius: 980px !important;
    text-align: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
  }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  6. PIXELOS CLOUD — Dashboard marketing                  ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .cloud-nav { padding: 0 16px !important; height: 48px !important; }
  .cloud-nav-links { display: none !important; }
  .cloud-nav-cta { font-size: 0.75rem !important; padding: 7px 14px !important; border-radius: 980px !important; }

  .cloud-hero { padding: 100px 24px 48px !important; min-height: auto !important; }
  .cloud-hero h1 { font-size: 2rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; }
  .cloud-hero .subtitle { font-size: 0.88rem !important; max-width: 100% !important; color: #6e6e73 !important; }
  .hero-badge { font-size: 0.6rem !important; padding: 5px 14px !important; }
  .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .hero-btn-primary, .hero-btn-secondary {
    width: auto !important;
    min-width: 200px !important;
    padding: 15px 28px !important;
    font-size: 0.85rem !important;
    border-radius: 980px !important;
    text-align: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
  }

  .dashboard-preview { margin: 0 20px !important; border-radius: 14px !important; overflow: hidden !important; }
  .dashboard-frame { border-radius: 14px !important; }
  .dashboard-content { grid-template-columns: 1fr !important; min-height: auto !important; }
  .dash-sidebar { display: none !important; }
  .dash-main { padding: 14px !important; }
  .dash-main-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .dash-screens { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .dash-screen-card { border-radius: 10px !important; }
  .dash-screen-thumb { height: 72px !important; }

  .features-section, .how-section, .pricing-section { padding: 48px 20px !important; }
  .sec-title { font-size: 1.65rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .sec-sub { font-size: 0.85rem !important; max-width: 100% !important; color: #6e6e73 !important; }

  .feature-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .feature-card { border-radius: 16px !important; padding: 22px 18px !important; background: #f5f5f7 !important; text-align: left !important; }
  .feature-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; margin-bottom: 12px !important; }

  .how-steps { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .how-step { border-radius: 14px !important; padding: 22px 16px !important; }
  .how-step-num { font-size: 1.8rem !important; }

  .analytics-split { grid-template-columns: 1fr !important; gap: 24px !important; }
  .analytics-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  .pricing-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .price-card { border-radius: 18px !important; padding: 26px 20px !important; }
  .price-val { font-size: 1.8rem !important; }
  .price-btn { width: 100% !important; padding: 13px !important; border-radius: 980px !important; font-size: 0.82rem !important; }

  .cta-banner { padding: 48px 24px !important; border-radius: 18px !important; margin: 0 20px !important; }
  .cta-banner h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
  .cta-banner p { font-size: 0.85rem !important; color: #6e6e73 !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  7. PIXELOS SIGNAL — Marketing page                      ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .hero { padding: 100px 24px 48px !important; min-height: auto !important; }
  .hero h1 { font-size: 2rem !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .hero-sub { font-size: 0.88rem !important; max-width: 100% !important; margin-bottom: 24px !important; color: #6e6e73 !important; }
  .hero-actions { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .hero .btn-primary, .hero .btn-secondary {
    width: auto !important;
    min-width: 200px !important;
    padding: 15px 28px !important;
    font-size: 0.85rem !important;
    border-radius: 980px !important;
    text-align: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
  }
  .hero-brands { flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
  .brand-pill { font-size: 0.68rem !important; padding: 5px 12px !important; border-radius: 980px !important; }

  .container { padding: 0 24px !important; max-width: 100% !important; }

  .section { padding: 48px 0 !important; }
  .section-header { margin-bottom: 28px !important; text-align: left !important; }
  .section-label { font-size: 0.6rem !important; letter-spacing: 2.5px !important; margin-bottom: 8px !important; color: #6e6e73 !important; }
  .section-title { font-size: 1.5rem !important; letter-spacing: -0.03em !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .section-sub { font-size: 0.85rem !important; max-width: 100% !important; color: #6e6e73 !important; }

  .steps-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .step-card { border-radius: 16px !important; padding: 22px 18px !important; }
  .step-number { font-size: 1.8rem !important; margin-bottom: 6px !important; }
  .feature-card-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; margin-bottom: 12px !important; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card { border-radius: 14px !important; padding: 20px 14px !important; }
  .stat-val { font-size: 1.5rem !important; font-weight: 800 !important; }
  .stat-label { font-size: 0.7rem !important; color: #6e6e73 !important; }

  .brands-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
    margin: 0 -4px !important; padding: 0 4px !important;
  }
  .brands-table { min-width: 580px !important; font-size: 0.72rem !important; }

  .connect-section { padding: 48px 0 !important; }
  .connect-box {
    max-width: 100% !important;
    padding: 26px 20px !important;
    border-radius: 20px !important;
    margin: 0 20px !important;
  }
  .connect-title { font-size: 1.3rem !important; font-weight: 700 !important; }
  .connect-subtitle { font-size: 0.82rem !important; color: #6e6e73 !important; }
  .input-group { flex-direction: column !important; gap: 8px !important; }
  .input-group input { border-radius: 12px !important; padding: 13px 14px !important; font-size: 0.85rem !important; }
  .input-group .btn-primary { width: 100% !important; border-radius: 12px !important; padding: 13px !important; }

  .map-section { padding: 48px 0 !important; }
  .map-box { border-radius: 16px !important; overflow: hidden !important; min-height: 280px !important; }

  .detail-panel {
    width: 100% !important; max-width: 100% !important; right: 0 !important;
    border-radius: 18px 18px 0 0 !important; bottom: 0 !important; top: auto !important;
    max-height: 55vh !important; overflow-y: auto !important;
  }
  .detail-inner { padding: 18px 16px !important; }
  .detail-metrics { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .detail-actions { flex-direction: column !important; gap: 6px !important; }
  .detail-btn { width: 100% !important; padding: 12px 18px !important; border-radius: 12px !important; text-align: center !important; justify-content: center !important; }

  .bottom-toolbar { padding: 6px 8px !important; gap: 3px !important; }
  .toolbar-btn { padding: 5px 8px !important; font-size: 0.68rem !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  8. PIXELOS DIRECT — App interface                       ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .conn-overlay { padding: 20px !important; }
  .conn-card { max-width: 100% !important; padding: 26px 20px !important; border-radius: 20px !important; }
  .conn-logo { width: 52px !important; height: 52px !important; }
  .conn-title { font-size: 1.3rem !important; font-weight: 700 !important; color: #1d1d1f !important; }
  .conn-sub { font-size: 0.82rem !important; color: #6e6e73 !important; }
  .conn-fg { margin-bottom: 12px !important; }
  .conn-label { font-size: 0.76rem !important; font-weight: 500 !important; color: #1d1d1f !important; }
  .conn-input, .conn-select { padding: 12px 14px !important; font-size: 0.85rem !important; border-radius: 12px !important; }
  .conn-row { flex-direction: column !important; gap: 12px !important; }
  .conn-actions { flex-direction: column !important; gap: 8px !important; }
  .conn-btn {
    width: 100% !important; padding: 13px 18px !important; font-size: 0.82rem !important;
    border-radius: 980px !important; text-align: center !important; justify-content: center !important; font-weight: 600 !important;
  }

  .topbar { padding: 0 8px !important; gap: 3px !important; height: 44px !important; }
  .tb-logo { font-size: 0.76rem !important; gap: 5px !important; }
  .tb-badge { font-size: 0.5rem !important; padding: 2px 5px !important; }
  .tb-sep { display: none !important; }
  .tb-conn { font-size: 0.6rem !important; }
  .tb-center { display: none !important; }
  .tb-btn { padding: 3px 6px !important; font-size: 0.65rem !important; }

  .sidebar {
    position: fixed !important; left: 0 !important; top: 44px !important; bottom: 0 !important;
    width: 82vw !important; max-width: 300px !important; z-index: 1000 !important;
    transform: translateX(-100%) !important; transition: transform 0.3s ease !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar-tabs { padding: 6px !important; }
  .sidebar-tab { padding: 7px 10px !important; font-size: 0.68rem !important; }

  .panel-right {
    position: fixed !important; right: 0 !important; top: 44px !important; bottom: 0 !important;
    width: 82vw !important; max-width: 300px !important; z-index: 1000 !important;
    transform: translateX(100%) !important; transition: transform 0.3s ease !important;
  }
  .panel-right.open { transform: translateX(0) !important; }

  .canvas-viewport { padding: 14px !important; }
  .canvas-toolbar { bottom: 6px !important; padding: 5px 8px !important; border-radius: 12px !important; }
  .ct-btn { width: 30px !important; height: 30px !important; font-size: 0.7rem !important; }

  .zone-types { grid-template-columns: 1fr !important; gap: 5px !important; }
  .zone-type-btn { padding: 8px 10px !important; border-radius: 10px !important; }

  .prop-group { padding: 12px !important; }
  .prop-label { font-size: 0.7rem !important; color: #6e6e73 !important; }
  .prop-input, .prop-select, .prop-textarea { padding: 9px 10px !important; font-size: 0.82rem !important; border-radius: 8px !important; }

  .statusbar { height: auto !important; padding: 3px 8px !important; font-size: 0.55rem !important; gap: 6px !important; flex-wrap: wrap !important; }

  .modal-overlay { padding: 16px !important; }
  .modal { width: 100% !important; max-width: 100% !important; padding: 22px 18px !important; border-radius: 18px !important; }

  .push-card { max-width: 100% !important; padding: 22px 18px !important; border-radius: 18px !important; }
  .push-steps { flex-direction: column !important; gap: 10px !important; }
  .push-step { padding: 12px !important; border-radius: 12px !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  9. PIXELOS VISION — Camera app                          ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .https-card, .perm-card {
    max-width: calc(100% - 40px) !important; padding: 26px 20px !important; border-radius: 20px !important;
  }
  .https-title, .perm-title { font-size: 1.1rem !important; font-weight: 600 !important; }
  .https-msg, .perm-msg { font-size: 0.82rem !important; color: #6e6e73 !important; }
  .demo-btn {
    width: 100% !important; padding: 13px 22px !important; font-size: 0.82rem !important;
    border-radius: 980px !important; font-weight: 600 !important;
  }
  .loading-bar-track { width: 170px !important; }
  .loading-sub { font-size: 0.76rem !important; }
  #scan-brackets { width: 170px !important; height: 170px !important; }
  .hud-label { font-size: 0.55rem !important; }
  .hud-fps { font-size: 0.6rem !important; }
  .blink-badge { font-size: 0.6rem !important; }
  .tap-hint { font-size: 0.7rem !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  10. PIXELOS AUTOMAPPING — Scanner app                   ║
     ╚═══════════════════════════════════════════════════════════╝ */

  .am-nav { height: 38px !important; padding: 0 6px !important; }
  .am-nav-item { font-size: 0.62rem !important; padding: 5px 8px !important; }

  .am-panel {
    width: calc(100% - 24px) !important; left: 12px !important; right: 12px !important;
    bottom: 76px !important; border-radius: 16px !important; max-height: 50vh !important; overflow-y: auto !important;
  }
  .am-panel-title { font-size: 0.82rem !important; }
  .am-panel-sub { font-size: 0.68rem !important; }
  .am-stats { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .am-stat { padding: 8px !important; border-radius: 8px !important; }
  .am-stat-value { font-size: 0.88rem !important; }
  .am-stat-label { font-size: 0.5rem !important; }

  .am-reticle-ring { width: 110px !important; height: 110px !important; }
  .am-reticle-text { font-size: 0.55rem !important; }
  .am-scan-badge { font-size: 0.55rem !important; }

  .am-hud { padding: 8px 12px !important; padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
  .am-hud-stat-value { font-size: 0.78rem !important; }
  .am-hud-stat-label { font-size: 0.48rem !important; }

  .am-btn { padding: 8px 16px !important; font-size: 0.72rem !important; border-radius: 980px !important; }
  .am-btn-scan { width: 44px !important; height: 44px !important; }
  .am-cab-list { gap: 5px !important; }
  .am-wiring { padding: 10px !important; border-radius: 10px !important; }
  .am-wiring-title { font-size: 0.65rem !important; }
  .am-wiring-chain { gap: 3px !important; }
  .am-demo-banner { font-size: 0.65rem !important; padding: 6px 14px !important; border-radius: 980px !important; }
  .am-toast { font-size: 0.72rem !important; padding: 8px 18px !important; border-radius: 12px !important; }


  /* ╔═══════════════════════════════════════════════════════════╗
     ║  SHARED — Apple design tokens everywhere                 ║
     ╚═══════════════════════════════════════════════════════════╝ */

  /* Apple pill buttons */
  .px-page .btn-primary, .px-page .s-hero-cta, .s-card-link.primary,
  .pc-generate, .qi-analyze, .ns-cta-primary, .ns-scan-btn, .ns-map-btn {
    border-radius: 980px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Apple link style */
  .s-card-link:not(.primary) {
    color: #0071e3 !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
  }

  /* Apple "free delivery" style bottom tiles */
  .s-eco-card, .s-g-item, .ns-info-card, .feature-card {
    border: none !important;
    text-align: left !important;
  }
}


/* ══════════════════════════════════════
   SMALL PHONES (≤430px)
   ══════════════════════════════════════ */
@media (max-width: 430px) {
  .s-hero-title { font-size: 2.2rem !important; }
  .s-hero-sub { font-size: 0.88rem !important; }
  .s-pillar-inner h3 { font-size: 1.35rem !important; }
  .s-title { font-size: 1.5rem !important; }
  .s-card-info h2 { font-size: 1.05rem !important; }
  .s-card-tagline { font-size: 0.82rem !important; }
  .s-cta h2 { font-size: 1.5rem !important; }

  .pc-hero h1, .qi-hero h1, .ns-hero h1,
  .cloud-hero h1, .hero h1 {
    font-size: 1.75rem !important;
  }

  .pc-sizes { grid-template-columns: 1fr 1fr !important; }
  .how-steps { grid-template-columns: 1fr !important; }
  .how-step { padding: 18px 14px !important; }
  .dash-screens { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-brands { flex-direction: column !important; align-items: center !important; }
  .s-prov-top { gap: 8px !important; }
  .s-milestones { grid-template-columns: 1fr !important; }
  .s-milestone-pct { font-size: 1.4rem !important; }
  .s-qr-card { padding: 22px 16px !important; }
  .s-sla-node { padding: 18px 14px !important; }

  .section { padding: 36px 0 !important; }
  .features-section, .how-section, .pricing-section { padding: 36px 20px !important; }
  .sec-title, .section-title { font-size: 1.35rem !important; }
}


/* ══════════════════════════════════════
   EXTRA SMALL (≤375px — iPhone SE)
   ══════════════════════════════════════ */
@media (max-width: 375px) {
  .s-hero { padding: 100px 20px 48px !important; }
  .s-hero-title { font-size: 1.95rem !important; }
  .s-pillar-inner h3 { font-size: 1.25rem !important; }
  .s-card-visual { min-height: 140px !important; }

  .pc-hero h1, .qi-hero h1, .ns-hero h1,
  .cloud-hero h1, .hero h1 {
    font-size: 1.6rem !important;
  }

  .ns-specs { grid-template-columns: 1fr !important; }
  .ns-blink-patterns { grid-template-columns: 1fr !important; }
  .qi-how-strip { grid-template-columns: 1fr !important; }

  #scan-brackets { width: 140px !important; height: 140px !important; }
  .am-reticle-ring { width: 90px !important; height: 90px !important; }
  .am-panel { bottom: 68px !important; max-height: 45vh !important; }

  .detail-panel { max-height: 45vh !important; }
  .detail-metrics { grid-template-columns: 1fr !important; }
}