/* ================================================================
   MISD  RESPONSIVE SYSTEM
   Breakpoints:
     1920+ : ultrawide / TV
     1440+ : large desktop
     1200  : laptop
     1024  : small desktop / large tablet
      900  : tablet
      767  : mobile  ← primary mobile breakpoint
      480  : small mobile
      375  : small phone (iPhone SE)
      220  : smartwatch
   ================================================================ */

/* ── Utilities ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================================================
   ULTRAWIDE  1920px+
   ================================================================ */
@media (min-width: 1920px) {
  /* Marketing nav */
  nav,
  .nav { padding: 0 8%; }

  /* Sections */
  section,
  .section { padding: 120px 8%; }
  .s-inner,
  .section-inner { max-width: 1400px; }

  /* Typography scale-up */
  .hero-h1   { font-size: clamp(72px, 6vw, 120px); }
  .s-title   { font-size: clamp(44px, 3.5vw, 68px); }
  .menu-item { font-size: clamp(42px, 3.5vw, 72px); }

  /* App pages */
  :root { --sidebar: 260px; --right: 340px; }
}

/* ================================================================
   LARGE DESKTOP  1440px+
   ================================================================ */
@media (min-width: 1440px) {
  nav,
  .nav { padding: 0 6%; }

  section,
  .section { padding: 112px 6%; }
  .s-inner,
  .section-inner { max-width: 1280px; }

  /* index.html */
  .stat-row   { grid-template-columns: repeat(4, 1fr); }
  .steps      { grid-template-columns: repeat(3, 1fr); }
  .types-grid { grid-template-columns: repeat(4, 1fr); }

  /* businesses.html */
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================
   LAPTOP  max-width: 1200px
   ================================================================ */
@media (max-width: 1200px) {
  /* App: collapse right panel */
  .right-panel { display: none !important; }
  .main        { margin-right: 0 !important; }

  /* businesses.html: pricing 4→3 col */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   SMALL DESKTOP / LARGE TABLET  max-width: 1024px
   ================================================================ */
@media (max-width: 1024px) {
  /* Marketing nav padding */
  nav,
  .nav { padding: 0 4%; }

  section,
  .section { padding: 80px 4%; }

  /* index fullmenu */
  .fullmenu-body   { grid-template-columns: 1fr; }
  .fullmenu-aside  { display: none; }

  /* index stat-row */
  .stat-row { grid-template-columns: repeat(2, 1fr); }

  /* businesses pricing 4→2 */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  /* App sidebar stays but shrinks */
  :root { --sidebar: 200px; }
  .sidebar .profile-name,
  .sidebar .nav-label { font-size: 13px; }
}

/* ================================================================
   TABLET  max-width: 900px
   ================================================================ */
@media (max-width: 900px) {
  /* ── index.html ── */
  .stat-row     { grid-template-columns: repeat(2, 1fr); }
  .steps        { grid-template-columns: 1fr; gap: 16px; }
  .steps .step-connector { display: none; }
  .types-grid   { grid-template-columns: repeat(2, 1fr); }
  .privacy-grid { grid-template-columns: 1fr; }
  .biz-teaser   { padding: 40px 24px; }
  .eco-pills    { gap: 10px; }

  /* ── about.html ── */
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card + .problem-card { border-left: none; border-top: 1px solid rgba(139,92,246,.18); }
  .not-grid     { grid-template-columns: 1fr; }
  .not-card:nth-child(odd) { border-right: none; border-bottom: 1px solid rgba(139,92,246,.18); }
  .rule-item    { gap: 20px; padding: 28px 24px; }

  /* ── businesses.html ── */
  .why-grid     { grid-template-columns: 1fr; }
  .why-card + .why-card { border-left: none; border-top: 1px solid rgba(139,92,246,.18); }
  .biz-steps    { grid-template-columns: 1fr; gap: 16px; }
  .biz-step::after { display: none; }
  .layer-strip  { grid-template-columns: 1fr; }
  .credits-grid { grid-template-columns: 1fr; }
  .takeover-grid-mktg { grid-template-columns: 1fr; gap: 16px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-card--wide { grid-column: span 1; }

  /* compare table: scrollable */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table      { min-width: 600px; }

  /* ── rooms.html ── */
  .room-grid     { grid-template-columns: repeat(2, 1fr); }
  .mechanics-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── how-it-works.html ── */
  .step-grid    { grid-template-columns: 1fr; }
  .anchor-box,
  .limit-card   { grid-template-columns: 1fr; gap: 28px; }

  /* ── Generic 3-col → 1-col ── */
  .three-col    { grid-template-columns: 1fr; }

  /* ── App pages ── */
  :root { --sidebar: 180px; }
}

/* ================================================================
   MOBILE  max-width: 767px
   ── Primary breakpoint. Full mobile experience. ──
   ================================================================ */
@media (max-width: 767px) {

  /* ── Global ── */
  html { font-size: 15px; }
  body { overflow-x: hidden; }

  /* ── MARKETING NAV ── */
  nav,
  .nav {
    height: 60px;
    padding: 0 20px;
  }
  .nav-logo img { height: 48px !important; }
  .nav-right .nav-cta { display: none; }   /* hide desktop CTA in nav */
  .theme-toggle { display: none; }

  /* index.html full-screen menu */
  .fullmenu-body  { flex-direction: column; overflow-y: auto; }
  .fullmenu-aside { display: none; }
  .fullmenu-primary { border-right: none; padding: 24px 6%; }
  .fullmenu-secondary {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 20px 6%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .fm-primary-items .fm-item { font-size: clamp(28px, 9vw, 44px); }
  .fullmenu-footer { padding: 16px 6%; flex-wrap: wrap; gap: 12px; }
  .fm-cta { width: 100%; text-align: center; }

  /* Standard marketing nav-menu (about, businesses, etc.) */
  .menu-body  { grid-template-columns: 1fr; overflow-y: auto; }
  .menu-aside { display: none; }
  .menu-nav   { border-right: none; padding: 24px 6%; }
  .menu-item  { font-size: clamp(28px, 9vw, 44px); padding: 8px 0; }
  .menu-footer { height: auto; padding: 12px 5%; }

  /* ── HERO SECTIONS ── */
  .hero {
    min-height: 100svh;
    padding: 100px 20px 60px;
    text-align: center;
  }
  .hero-h1     { font-size: clamp(40px, 12vw, 64px); }
  .hero-sub    { font-size: 16px; max-width: 100%; }
  .hero-ctas   { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { text-align: center; justify-content: center; width: 100%; }

  .page-hero   { min-height: 60vh; padding: 100px 20px 48px; }
  .about-hero  { padding: 100px 20px 48px; min-height: 60vh; }
  .biz-hero    { padding: 100px 20px 48px; min-height: 60vh; }

  /* ── SECTIONS ── */
  section,
  .section { padding: 60px 20px; }
  .s-inner,
  .section-inner { padding: 0; }
  .section-glass .section-inner { padding: 0 20px; }

  /* ── TYPOGRAPHY ── */
  .s-title,
  .hero-h1,
  h1.s-title    { letter-spacing: -1.5px; }
  .about-hero-h { letter-spacing: -2px; }

  /* ── GRIDS → single column ── */
  .stat-row,
  .steps,
  .step-grid,
  .types-grid,
  .privacy-grid,
  .why-grid,
  .biz-steps,
  .pricing-grid,
  .layer-strip,
  .credits-grid,
  .takeover-grid-mktg,
  .preview-grid,
  .problem-grid,
  .not-grid,
  .room-grid,
  .mechanics-grid { grid-template-columns: 1fr !important; }

  /* reset 1px-border separators to top borders */
  .step-card + .step-card,
  .problem-card + .problem-card,
  .why-card + .why-card { border-left: none !important; border-top: 1px solid rgba(139,92,246,.18) !important; }

  /* ── BUTTONS ── */
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 16px 24px;
  }
  .biz-cta-btns { flex-direction: column; align-items: stretch; }

  /* ── PRICING ── */
  .price-card + .price-card { border-top: 1px solid rgba(139,92,246,.18); }

  /* ── moments strip (index) ── */
  .moments-strip { padding: 0 20px 16px; }
  .moment-chip   { min-width: 260px; }

  /* ── expiry strip ── */
  .expiry-strip { flex-wrap: wrap; justify-content: center; gap: 8px; }

  /* ── rule items (about) ── */
  .rule-item { flex-direction: column; gap: 12px; padding: 24px 20px; }
  .rule-num  { font-size: 28px; min-width: unset; }

  /* ── press page ── */
  .press-grid,
  .coverage-grid { grid-template-columns: 1fr; }

  /* ── compare table ── */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table      { min-width: 560px; font-size: 12px; }

  /* ── get-started ── */
  .gs-grid,
  .plan-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ── cities page ── */
  .cities-grid  { grid-template-columns: repeat(2, 1fr); }
  .city-card    { padding: 20px 16px; }

  /* ── FOOTER ── */
  footer.mkt-footer,
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 20px;
  }
  .footer-top        { flex-direction: column; gap: 32px; }
  .footer-brand      { max-width: 100%; }
  .footer-brand img  { height: 36px !important; }
  .footer-cols       { gap: 32px; flex-wrap: wrap; }
  .footer-col        { min-width: calc(50% - 16px); }
  .footer-links      { flex-wrap: wrap; gap: 16px; }
  .footer-copy       { font-size: 11px; }

  /* ── APP PAGES — mobile shell ── */
  /* Hide desktop chrome */
  .sidebar { display: none !important; }
  .right-panel { display: none !important; }

  /* Full-width main */
  .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 72px;   /* room for bottom nav */
  }

  /* App top bar — tighten spacing so all items fit on mobile */
  .global-nav { padding: 0 10px; height: 60px; gap: 6px; }
  .global-nav-logo img { height: 28px; }
  .global-nav .gn-right { gap: 6px; }
  .global-nav-cta { padding: 5px 10px; font-size: 11px; }
  #mm-theme-btn { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  .global-nav-primary { padding: 6px 12px; font-size: 12px; }

  /* Bottom nav shown */
  .mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: rgba(4,4,10,.94);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(139,92,246,.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 200;
    align-items: stretch;
  }
  .mobile-nav-inner {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
  }
  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 8px 4px;
    text-decoration: none;
    color: rgba(241,240,255,.4);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
  }
  .mobile-nav-btn span:first-child { font-size: 22px; line-height: 1; }
  .mobile-nav-btn.active,
  .mobile-nav-btn[data-active] { color: #8B5CF6; }

  /* Feed/content padding for bottom nav */
  .feed          { padding-bottom: 80px !important; }
  .content       { padding-bottom: 80px; }
  .conn-left     { height: calc(100vh - 60px - 60px); }

  /* App topbar */
  .topbar { padding: 12px 16px; top: 60px; }
  .topbar-title { font-size: 18px; }

  /* App filters */
  .filters { padding: 8px 16px; top: 60px; }

  /* Feed */
  .feed    { padding: 16px 16px 80px; max-width: 100%; }

  /* Cards */
  .card-inner { padding: 16px 18px 14px 22px; }
  .card-body  { font-size: 15px; }

  /* Profile page */
  .profile-header { flex-direction: column; text-align: center; align-items: center; }
  .profile-stats  { justify-content: center; }

  /* Room page */
  .room-detail-header { flex-direction: column; }

  /* Chat page */
  .chat-list { width: 100%; }
  .chat-main { display: none; }
  .chat-main.active { display: flex; width: 100%; }

  /* Connections */
  .conn-grid { grid-template-columns: 1fr; }

  /* onboarding */
  .onboarding-card { padding: 32px 20px; max-width: 100%; }

  /* dashboard */
  .dash-grid      { grid-template-columns: 1fr; }
  .dash-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Map page */
  .map-container { height: calc(100vh - 60px - 60px); }
}

/* ================================================================
   SMALL MOBILE  max-width: 480px
   ================================================================ */
@media (max-width: 480px) {
  /* Nav */
  nav, .nav { height: 56px; padding: 0 16px; }
  .nav-logo img { height: 40px !important; }
  .menu-btn,
  .nav-menu-btn { width: 34px; height: 34px; }

  /* App top bar — tighter still on small phones */
  .global-nav { padding: 0 8px; gap: 0; }
  .global-nav-logo img { height: 26px; }
  .global-nav .gn-right { gap: 5px; }
  .global-nav-cta { padding: 4px 8px; font-size: 10.5px; }
  #mm-theme-btn { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .global-nav-primary { padding: 5px 10px; font-size: 11.5px; }

  /* Hero */
  .hero    { padding: 90px 16px 48px; }
  .hero-h1 { font-size: clamp(34px, 11vw, 52px); }
  .hero-sub { font-size: 15px; }
  .page-hero, .about-hero, .biz-hero { padding: 88px 16px 40px; }

  /* Sections */
  section, .section { padding: 48px 16px; }

  /* moment chips */
  .moment-chip { min-width: 240px; padding: 16px; }

  /* Expiry chips */
  .expiry-chip { font-size: 11px; padding: 6px 12px; }

  /* pricing */
  .price-card { padding: 24px 20px; }

  /* index eco pills */
  .eco-pill  { padding: 12px 20px !important; }
  .eco-logo  { height: 26px !important; }

  /* footer */
  .footer-col { min-width: 100%; }

  /* app cards */
  .card, .panel-card { border-radius: 12px; }
  .card-inner { padding: 14px 16px 12px 18px; }

  /* app feed */
  .topbar  { padding: 10px 14px; }
  .filters { padding: 8px 14px; }
  .feed    { padding: 12px 12px 80px; gap: 10px; }

  /* stat chips */
  .chip { font-size: 11px; padding: 5px 10px; }

  /* dashboard stats */
  .dash-stat-grid { grid-template-columns: 1fr; }

  /* cities grid */
  .cities-grid { grid-template-columns: 1fr; }

  /* support, terms, privacy */
  .doc-content { padding: 0; font-size: 14px; }
  .doc-content h2 { font-size: 20px; }
  .doc-content h3 { font-size: 16px; }

  /* buttons */
  .btn-primary,
  .btn-secondary,
  .btn-ghost { font-size: 14px; padding: 14px 20px; }
}

/* ================================================================
   SMALL PHONE  max-width: 375px
   ================================================================ */
@media (max-width: 375px) {
  html { font-size: 14px; }

  nav, .nav { height: 52px; padding: 0 14px; }
  .nav-logo img { height: 36px !important; }

  /* Hero */
  .hero    { padding: 80px 14px 40px; }
  .hero-h1 { font-size: clamp(30px, 10vw, 48px); }
  .hero-eyebrow { font-size: 9px; }

  section, .section { padding: 40px 14px; }

  /* menu items */
  .menu-item    { font-size: clamp(24px, 8vw, 38px); }
  .fm-item-text { font-size: clamp(24px, 8vw, 38px); }

  /* moment strip */
  .moment-chip { min-width: 220px; padding: 14px; font-size: 13px; }

  /* cards */
  .card, .panel-card { border-radius: 10px; }
  .card-inner { padding: 12px 14px 10px 16px; }
  .card-body  { font-size: 14px; line-height: 1.65; }
  .type-badge { font-size: 10px; padding: 3px 8px; }

  /* topbar */
  .topbar-title { font-size: 16px; }
  .btn-post     { font-size: 12px; padding: 8px 14px; }

  /* chips */
  .chip { font-size: 10px; padding: 5px 9px; }

  /* mobile bottom nav */
  .mobile-nav-btn span:first-child { font-size: 20px; }
  .mobile-nav-btn { font-size: 9px; }

  /* businesses compare table */
  .compare-table { font-size: 11px; }

  /* footer */
  .footer-copy { display: none; }
}

/* ================================================================
   SMARTWATCH  max-width: 220px
   ================================================================ */
@media (max-width: 220px) {
  /* Hide all complex navigation */
  nav, .nav, .global-nav { display: none !important; }
  .nav-menu, .fullmenu   { display: none !important; }
  .sidebar, .right-panel { display: none !important; }
  .mobile-nav            { display: none !important; }

  /* Reset body */
  body { font-size: 11px; overflow-x: hidden; }
  html { font-size: 11px; }

  /* Strip animations */
  * { animation: none !important; transition: none !important; }

  /* Hero */
  .hero, .page-hero, .about-hero, .biz-hero {
    min-height: unset;
    padding: 20px 10px 20px;
    text-align: center;
  }
  .hero-h1 { font-size: 20px; letter-spacing: -0.5px; }
  .hero-sub { font-size: 11px; }
  .hero-ctas { flex-direction: column; gap: 8px; }
  .btn-primary, .btn-secondary, .btn-ghost { font-size: 11px; padding: 8px 12px; }

  /* Sections */
  section, .section { padding: 20px 10px; }
  .s-title  { font-size: 16px; }
  .s-sub    { font-size: 11px; }
  .eyebrow  { font-size: 9px; }

  /* Grids → single column */
  [class*="-grid"], [class*="-steps"],
  .stat-row, .steps, .pricing-grid,
  .footer-cols { grid-template-columns: 1fr !important; display: block !important; }

  /* Cards */
  .card, .panel-card, .price-card,
  .biz-step, .problem-card { padding: 12px 10px; border-radius: 8px; }

  /* App main */
  .main { margin: 0 !important; padding: 10px !important; }
  .feed { padding: 8px !important; }
  .feed .card + .card { margin-top: 8px; }

  /* Footer */
  footer { padding: 16px 10px; flex-direction: column; gap: 10px; }
  .footer-links, .footer-cols { display: none; }
  .footer-copy { font-size: 9px; }
  .footer-brand img { height: 24px !important; }

  /* Hide decorative elements */
  .bg-orb, .glow-orb, .orb,
  .orb-a, .orb-b, .orb-c, .orb-d,
  .orb-purple, .orb-cyan, .orb-pink,
  .bg-scanlines, .bg-scan, .bg-grid, .bg-dots,
  .moments-strip, .expiry-strip { display: none !important; }
}

/* ================================================================
   SAFE AREA  (iPhone notch / Dynamic Island / home indicator)
   ================================================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  nav, .nav, .global-nav {
    padding-top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
  }
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
  .main { padding-top: calc(60px + env(safe-area-inset-top)) !important; }
}

/* ================================================================
   TOUCH / HOVER REFINEMENTS
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms on touch devices */
  .card:hover,
  .biz-step:hover,
  .price-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover { transform: none !important; }

  /* Larger tap targets */
  .nav-item,
  .mobile-nav-btn,
  .menu-item { min-height: 44px; }

  .chip  { min-height: 36px; display: inline-flex; align-items: center; }
  .r-btn { min-height: 36px; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  nav, .nav, .global-nav,
  .nav-menu, .fullmenu,
  .sidebar, .right-panel,
  .mobile-nav,
  .bg-orb, .glow-orb, .orb,
  .bg-scanlines, .bg-scan, .bg-grid { display: none !important; }

  body  { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .main { margin: 0 !important; padding: 0 !important; }

  section, .section { padding: 24pt 0; }
  .s-title { font-size: 20pt; }
  a { color: inherit !important; text-decoration: underline; }
}