/* ─── RESPONSIVE (legacy — kept for 769-960 range) ───────────── */
@media (min-width: 769px) and (max-width: 960px) {
  #hero {
    flex-direction: column; height: auto; min-height: 100vh; max-height: none;
    padding: 120px 28px 60px; gap: 56px; align-items: flex-start;
  }
  .hero-left { width: 100%; padding-right: 0; }
  .hero-right { width: 100%; justify-content: center; }
  .pos-device { width: 280px; }
  nav { padding: 0 28px; height: 80px; }
  .nav-logo img { height: 66px; }
  #features { padding: 64px 28px 80px; }
  .feat-clusters { gap: 56px; }
  .feat-cluster-title { font-size: 20px; }
  .feat-cards--3   { grid-template-columns: repeat(2, 1fr); }
  .feat-cards--pay { grid-template-columns: 1fr; }
  .feat-cards--2x2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — ≤ 768px
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── GLOBAL SAFETY ─── */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* ─── NAV ─── */
  nav { padding: 0 16px; height: 64px; }
  .nav-logo img { height: 54px; }

  /* ─── HERO ─── */
  #hero {
    flex-direction: column;
    height: auto; min-height: auto; max-height: none;
    padding: 90px 20px 40px;
    gap: 36px; align-items: flex-start;
  }
  .hero-left { width: 100%; padding-right: 0; gap: 18px; }
  .hero-headline { font-size: 28px; letter-spacing: -1px; }
  .hero-sub { font-size: 14px; }
  .hero-cta { flex-direction: column; gap: 10px; width: 100%; }
  .btn-primary, .btn-demo { width: 100%; justify-content: center; padding: 14px 20px; }
  .hero-right { width: 100%; justify-content: center; }
  .pos-device { width: 220px; }
  .pos-glow { width: 320px; height: 400px; }

  /* ─── FEATURES ─── */
  #features { padding: 48px 20px 60px; }
  .feat-clusters { gap: 40px; }
  .feat-cluster-hd { margin-bottom: 20px; }
  .feat-cluster-label { font-size: 10px; letter-spacing: 1.2px; }
  .feat-cluster-title { font-size: 18px; }
  .feat-cluster-desc { font-size: 13px; }
  .feat-cards--3 { grid-template-columns: 1fr; }
  .feat-cards--pay { grid-template-columns: 1fr; }
  .feat-cards--2x2 { grid-template-columns: 1fr; }
  .feat-card { padding: 20px; }
  .feat-card-title { font-size: 15px; }
  .feat-card-desc { font-size: 13px; }
  .feat-card-flow { gap: 6px; }
  .feat-flow-step { font-size: 10px; padding: 4px 10px; }

  /* ─── CONTACT ─── */
  #contact { padding: 60px 20px 50px; }
  .contact-title { font-size: 24px; }
  .contact-sub { font-size: 14px; margin-bottom: 32px; }
  .contact-options { flex-direction: column; align-items: center; gap: 12px; }
  .contact-option { width: 100%; max-width: 280px; padding: 20px 24px; }

  /* ─── FOOTER ─── */
  footer { padding: 20px; }
  footer p { font-size: 12px; }

  /* ─── FEATURES DEMO CTA ─── */
  .features-demo-cta { padding: 20px; }

  /* ═══════════════════════════════════════════════════════
     DEMO ENVIRONMENT — MOBILE
  ═══════════════════════════════════════════════════════ */

  /* ─── DEMO HEADER ─── */
  .demo-header { height: 44px; padding: 0 0 0 8px; }
  .demo-back-btn { font-size: 12px; padding: 4px 10px 4px 2px; }
  .demo-tabs { height: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .demo-tab { padding: 0 12px; height: 44px; font-size: 11px; }
  .demo-badge { display: none; }

  /* ─── VIEW 1: POS DEMO (FOH) ─── */
  .pos-demo-layout { flex-direction: column; overflow-y: auto; }
  .pos-menu-panel { flex: none; min-height: 0; max-height: none; }
  .pos-cat-bar {
    gap: 6px; padding: 10px 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .pos-cat-btn { padding: 6px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .pos-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; padding: 10px 12px;
    max-height: 45vh; overflow-y: auto;
  }
  .pos-item-card { padding: 12px 10px; }
  .pos-item-name { font-size: 12px; }
  .pos-item-price { font-size: 11px; }
  .pos-order-panel {
    width: 100%; flex-shrink: 0;
    border-left: none; border-top: 1px solid rgba(0,0,0,0.09);
    max-height: 50vh;
  }
  .pos-order-head { padding: 10px 14px; }
  .pos-order-list { padding: 8px 12px; }
  .pos-order-foot { padding: 10px 12px; }
  .pos-send-btn { padding: 12px; font-size: 13px; }
  .pos-status-bar { margin: 6px 12px 0; padding: 6px 10px; font-size: 10px; }

  /* ─── VIEW 2: FLOW ─── */
  .flow-controls {
    padding: 8px 12px; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .flow-ctrl-btn { padding: 6px 12px; font-size: 12px; flex-shrink: 0; }
  .flow-steps-row {
    padding: 8px 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .flow-step-pill { padding: 4px 7px; font-size: 10px; }
  .flow-step-num { width: 18px; height: 18px; font-size: 9px; }
  .flow-content { padding: 12px; }
  .flow-card { padding: 20px 16px 18px; max-width: 100%; }
  .flow-card-title { font-size: 16px; }
  .flow-card-sub { font-size: 11px; }
  .flow-bill-row { font-size: 12px; padding: 6px 0; }
  .flow-bill-total { font-size: 14px; }
  .flow-device-area { padding: 12px; }
  .flow-device-area .pos-device { width: 200px; }
  .flow-device-area .pos-device .pos-statusbar { height: 36px; font-size: 9px; padding: 0 14px 4px; }
  .flow-device-area .pos-device .pos-appheader { padding: 4px 10px 5px; }
  .flow-device-area .pos-device .pos-appheader-logo img { height: 14px; }
  .flow-device-area .pos-device .pos-session-name { font-size: 8px; }
  .flow-device-area .pos-device .pos-session-sub { font-size: 7px; }

  /* ─── VIEW 3: DASHBOARD ─── */
  /* Login */
  .dash-login-wrap { padding: 16px; }
  .dash-login-card { padding: 28px 20px; max-width: 100%; }

  /* Dashboard layout — scroll fix: make dash-wrap the scroll container */
  .dash-wrap { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dash-sidebar {
    width: 100%; flex-shrink: 0;
    border-right: none; border-bottom: 1px solid #E2E8F0;
    max-height: none;
  }
  .dash-sidebar-logo { padding: 12px 16px; }
  .dash-sidebar-nav {
    display: flex; flex-direction: row;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 8px; gap: 2px;
  }
  .dash-nav-item {
    flex-shrink: 0; white-space: nowrap;
    padding: 8px 12px; margin: 4px 0; font-size: 12px;
  }
  .dash-sidebar-footer { display: none; }
  .dash-main { flex: 0 0 auto; overflow: visible; }

  /* Dashboard main */
  .dash-topbar { height: 44px; padding: 0 14px; }
  .dash-topbar-title { font-size: 14px; }
  .dash-content { padding: 14px; gap: 14px; overflow: visible; flex: none; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-card { padding: 14px 12px; }
  .dash-card-label { font-size: 10px; margin-bottom: 4px; }
  .dash-card-value { font-size: 18px; }
  .dash-card-delta { font-size: 11px; }
  .dash-chart-panel { padding: 14px; }
  .dash-chart-header { margin-bottom: 12px; }
  .dash-chart-title { font-size: 13px; }
  .dash-chart-tab { font-size: 11px; padding: 3px 8px; }
  .dash-line-chart { height: 90px; }
  .dash-lower { grid-template-columns: 1fr; gap: 14px; }
  .dash-panel { padding: 14px 16px; }
  .dash-panel-title { font-size: 13px; margin-bottom: 10px; }

  /* Dashboard sections (orders, menu, etc.) */
  .dsec-table { font-size: 12px; display: block; overflow-x: auto; }
  .dsec-table th { font-size: 10px; padding: 0 8px 8px; white-space: nowrap; }
  .dsec-table td { padding: 9px 8px; font-size: 12px; }
  .dsec-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dsec-bar-chart { height: 70px; }

  /* ─── VIEW 4: KDS — vertical stacking on mobile ─── */
  .kds-view {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kds-col {
    min-width: 0; width: 100%; flex: none;
  }
  .kds-col-head { padding: 10px 14px; font-size: 10px; }
  .kds-count { min-width: 20px; height: 20px; font-size: 11px; }
  .kds-tickets { padding: 8px; gap: 6px; overflow-y: visible; max-height: none; }
  .kds-ticket { padding: 12px; }
  .kds-ticket-num { font-size: 14px; }
  .kds-ticket-item { font-size: 12px; }
  .kds-advance-btn { padding: 8px; font-size: 10px; }

  /* ─── LANDING NEW SECTIONS ─── */
  #feature-preview { padding: 48px 20px; }
  .preview-grid { grid-template-columns: 1fr; gap: 14px; }
  .preview-card { padding: 20px 18px; }
  .preview-card-title { font-size: 15px; }
  .preview-card-desc { font-size: 13px; }
  .preview-cta { width: 100%; justify-content: center; padding: 14px 24px; font-size: 14px; }
  #positioning { padding: 48px 20px; }
  .positioning-title { font-size: 24px; }
  .positioning-desc { font-size: 14px; margin-bottom: 32px; }
  .positioning-stats { flex-direction: column; gap: 24px; }
  .positioning-stat-num { font-size: 32px; }

  /* ─── ONBOARDING ─── */
  .ob-overlay { padding: 48px 16px 36px; }
  .ob-close { top: 12px; right: 14px; font-size: 22px; }
  .ob-progress { margin-bottom: 32px; }
  .ob-title { font-size: 22px; }
  .ob-subtitle { font-size: 13px; }
  .ob-input, .ob-select { padding: 12px 14px; font-size: 14px; }
  .ob-card-grid { grid-template-columns: 1fr; gap: 8px; }
  .ob-card { padding: 16px 14px; }
  .ob-chip { padding: 12px 14px; gap: 10px; }
  .ob-chip-label { font-size: 13px; }
  .ob-chip-sub { font-size: 11px; }
  .ob-tier-card { padding: 16px 14px; gap: 12px; }
  .ob-tier-name { font-size: 16px; }
  .ob-btn { padding: 14px; font-size: 14px; }
  .ob-secondary-ctas { flex-direction: column; align-items: center; }

  /* ─── CHAT WIDGET ─── */
  .chat-widget { bottom: 12px; right: 12px; left: 12px; align-items: stretch; }
  .chat-toggle { width: 48px; height: 48px; align-self: flex-end; }
  .chat-panel {
    width: 100%; height: 70vh; max-height: 480px;
  }
  .chat-header { padding: 12px 14px; }
  .chat-header-title { font-size: 13px; }
  .chat-messages { padding: 10px; gap: 8px; }
  .chat-bubble { padding: 8px 11px; font-size: 12px; }
  .chat-suggestions { padding: 0 10px 8px; }
  .chat-suggestion { padding: 7px 10px; font-size: 11px; }
  .chat-input-row { padding: 10px; gap: 6px; }
  .chat-input { padding: 7px 10px; font-size: 12px; }
  .chat-send-btn { width: 34px; height: 34px; }

  /* ═══════════════════════════════════════════════════════
     TERMINAL MOBILE SCALING — Hero animation + Demo E2E
  ═══════════════════════════════════════════════════════ */

  /* ─── Device chrome ─── */
  .pos-statusbar { height: 40px; padding: 0 16px 5px; font-size: 10px; }
  .pos-appheader { padding: 5px 12px 6px; }
  .pos-appheader-logo img { height: 16px; }
  .pos-appheader-sep { height: 14px; }
  .pos-session-name { font-size: 9px; }
  .pos-session-sub { font-size: 7.5px; }
  .pos-live { font-size: 8px; gap: 3px; }
  .pos-live-dot { width: 4px; height: 4px; }
  .pos-home { bottom: 4px; width: 52px; }

  /* ─── Screen view base ─── */
  .sv { padding: 6px 10px 10px; }
  .sv-step { font-size: 7px; margin-bottom: 4px; }
  .sv-header { margin-bottom: 6px; }
  .sv-title { font-size: 11px; }
  .sv-sub { font-size: 8.5px; }
  .sv-btn { padding: 7px; font-size: 9.5px; border-radius: 8px; }
  .sv-item-note { font-size: 7px; padding: 0 0 2px 10px; }

  /* ─── S1: Table grid ─── */
  .sv-table-grid { gap: 5px; }
  .sv-table-cell { font-size: 8px; aspect-ratio: 1.3; border-radius: 7px; border-width: 1px; }
  .sv-table-cell.occ { font-size: 7px; }
  .sv-selection-note { font-size: 7.5px; padding-top: 4px; }

  /* ─── S2: Menu ─── */
  .sv-cat-tabs { margin-bottom: 5px; }
  .sv-cat-tab { padding: 4px 8px 5px; font-size: 8.5px; }
  .sv-menu-grid { gap: 4px; }
  .sv-menu-item { padding: 6px 7px; border-radius: 6px; }
  .sv-menu-name { font-size: 8px; margin-bottom: 2px; }
  .sv-menu-price { font-size: 7.5px; }
  .sv-menu-qty { top: 3px; right: 3px; min-width: 13px; height: 13px; font-size: 7px; border-radius: 3px; }
  .sv-order-strip { padding: 5px 0 0; }
  .sv-strip-count { font-size: 7.5px; }
  .sv-strip-total { font-size: 10px; }
  .sv-strip-btn { padding: 5px 10px; font-size: 8.5px; border-radius: 6px; }

  /* ─── S3/S6: Bill rows ─── */
  .sv-bill-row { padding: 3px 0; font-size: 8.5px; }
  .sv-bill-row .amt { font-size: 8.5px; }
  .sv-bill-total { padding: 5px 0 0; font-size: 10px; }

  /* ─── S4: Syncing ─── */
  .sv-center { gap: 8px; padding-bottom: 6px; }
  .sv-cloud-wrap { width: 44px; height: 44px; }
  .sv-sync-title { font-size: 12px; }
  .sv-sync-sub { font-size: 8.5px; }
  .sv-sync-dot { width: 4px; height: 4px; }
  .sv-order-tag { font-size: 7.5px; padding: 2px 8px; }

  /* ─── S5: Order Ready ─── */
  .sv-check-wrap { width: 44px; height: 44px; }
  .sv-ready-title { font-size: 12px; }
  .sv-ready-sub { font-size: 8.5px; }
  .sv-served-list { gap: 4px; padding: 6px 8px; }
  .sv-served-item { font-size: 8.5px; gap: 5px; }
  .sv-served-check { width: 12px; height: 12px; }

  /* ─── S6: Receipt options ─── */
  .sv-ro { margin: 4px 0 2px; }
  .sv-ro-qr-area { padding: 2px 0 3px; }
  .sv-ro-caption { font-size: 6.5px; margin-top: 3px; }
  .sv-ro-print-btn { padding: 5px; font-size: 9px; border-radius: 7px; }

  /* ─── S7–S8: Payment method / split type (hero animation) ─── */
  .sv-ha-list { gap: 4px; padding: 2px 0; }
  .sv-ha-btn { padding: 7px 9px; font-size: 8.5px; border-radius: 8px; gap: 7px; }
  .sv-ha-icon { width: 22px; height: 22px; border-radius: 6px; }
  .sv-ha-arrow { font-size: 13px; }
  .sv-pay-back { font-size: 8.5px; padding: 4px; margin-top: 2px; }

  /* ─── S9/S12: Split item checks (hero animation) ─── */
  .sv-ha-checks { gap: 3px; padding: 1px 0; }
  .sv-ha-check { padding: 5px 7px; font-size: 8.5px; gap: 5px; border-radius: 6px; }
  .sv-ha-cb, .sv-ha-cb-empty { width: 12px; height: 12px; border-radius: 3px; }
  .sv-ha-cb { font-size: 7px; }
  .sv-ha-price { font-size: 8.5px; }
  .sv-ha-sel-total { padding: 5px 7px; margin-top: 2px; font-size: 8.5px; }
  .sv-ha-sel-amt { font-size: 10px; }

  /* ─── S10/S13: Tip grid (hero animation) ─── */
  .sv-ha-tip-grid { gap: 4px; padding: 1px 0; }
  .sv-ha-tip-btn { padding: 6px 4px; font-size: 9px; border-radius: 6px; }
  .sv-ha-tip-amt { font-size: 7px; }
  .sv-ha-tip-total { padding: 5px 4px; margin-top: 2px; font-size: 8.5px; }
  .sv-ha-tip-grand { font-size: 10px; }

  /* ─── S11/S14: Card tap animation ─── */
  .sv-nfc-reader { width: 42px; height: 42px; }
  .sv-nfc-label { font-size: 6.5px; }
  .sv-tap-card { width: 78px; height: 50px; border-radius: 8px; padding: 5px 7px 4px; }
  .sv-tc-chip { width: 14px; height: 10px; }
  .sv-tc-mc-r, .sv-tc-mc-y { width: 11px; height: 11px; }
  .sv-tc-mc-y { margin-left: -5px; }
  .sv-tc-num { font-size: 5.5px; }
  .sv-7-result { padding-top: 5px; }
  .sv-approved { font-size: 11px; gap: 5px; margin-bottom: 2px; }
  .sv-approved-ring { width: 18px; height: 18px; }
  .sv-txn-info { font-size: 7.5px; margin-bottom: 6px; }

  /* ─── S15: Order Closed ─── */
  .sv-done-ring { width: 40px; height: 40px; }
  .sv-done-label { font-size: 7.5px; margin-top: 6px; }
  .sv-done-amount { font-size: 18px; }
  .sv-done-ref { font-size: 7px; margin-bottom: 8px; }
  .sv-done-rows { border-radius: 6px; }
  .sv-done-row { padding: 5px 7px; font-size: 8.5px; gap: 6px; }
  .sv-done-tick { width: 13px; height: 13px; }
  .sv-done-sub { font-size: 7.5px; }

  /* ─── Demo interactive payment stages (dsv-7) ─── */
  .sv-pm-list { gap: 6px; }
  .sv-pm-btn { padding: 8px 10px; gap: 8px; border-radius: 10px; }
  .sv-pm-icon { width: 28px; height: 28px; border-radius: 8px; }
  .sv-pm-name { font-size: 10px; }
  .sv-tip-grid { gap: 5px; }
  .sv-tip-btn { padding: 7px 4px; border-radius: 8px; }
  .sv-tip-pct { font-size: 11px; }
  .sv-tip-amt { font-size: 8px; }
  .sv-tip-total { padding: 6px 4px 0; margin-top: 5px; }
  .sv-tip-total-label { font-size: 8.5px; }
  .sv-tip-total-amt { font-size: 11px; }
  .sv-split-list { gap: 6px; }
  .sv-split-btn { padding: 10px; gap: 8px; border-radius: 10px; }
  .sv-split-icon { width: 26px; height: 26px; font-size: 11px; }
  .sv-split-label { font-size: 9.5px; }
  .sv-sd-rows { gap: 3px; }
  .sv-sd-row { padding: 7px 9px; font-size: 9.5px; border-radius: 8px; }
  .sv-cash-display { gap: 4px; }
  .sv-cash-due, .sv-cash-tendered, .sv-cash-change { padding: 6px 9px; border-radius: 6px; }
  .sv-cash-lbl { font-size: 8.5px; }
  .sv-cash-val { font-size: 12px; }
  .sv-cash-quicks { gap: 4px; padding: 6px 2px 0; }
  .sv-cash-quick { padding: 6px 3px; font-size: 8.5px; border-radius: 6px; }
  .sv-sg-stepper { gap: 12px; }
  .sv-sg-step-btn { width: 28px; height: 28px; font-size: 14px; }
  .sv-sg-count { font-size: 22px; }
  .sv-si-list { gap: 3px; max-height: 100px; }
  .sv-si-row { padding: 6px 8px; font-size: 9.5px; }
  .sv-si-check { width: 14px; height: 14px; }
  .sv-si-name { font-size: 9.5px; }
  .sv-si-price { font-size: 9px; }

  /* ─── Hero note animation ─── */
  .sv-hero-note { font-size: 9px; }
  .sv-hero-cursor { height: 8px; }
}

/* ═══════════════════════════════════════════════════════
   TABLET ADJUSTMENTS — 769px to 1024px
═══════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* ─── NAV ─── */
  nav { padding: 0 28px; height: 80px; }
  .nav-logo img { height: 72px; }

  /* ─── HERO ─── */
  #hero {
    flex-direction: column; height: auto; min-height: auto; max-height: none;
    padding: 110px 36px 60px; gap: 48px; align-items: flex-start;
  }
  .hero-left { width: 100%; padding-right: 0; }
  .hero-right { width: 100%; justify-content: center; }
  .pos-device { width: 270px; }

  /* ─── FEATURES ─── */
  #features { padding: 64px 36px 80px; }
  .feat-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .feat-cards--pay { grid-template-columns: 1fr; }
  .feat-cards--2x2 { grid-template-columns: repeat(2, 1fr); }

  /* ─── CONTACT ─── */
  #contact { padding: 72px 36px 60px; }
  .contact-title { font-size: 28px; }

  /* ─── DEMO HEADER ─── */
  .demo-header { height: 48px; }
  .demo-tab { height: 48px; font-size: 12px; padding: 0 14px; }
  .demo-badge { font-size: 9px; padding: 0 12px; }

  /* ─── POS DEMO ─── */
  .pos-order-panel { width: 260px; }
  .pos-items-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 12px; }

  /* ─── DASHBOARD ─── */
  .dash-sidebar { width: 180px; }
  .dash-nav-item { font-size: 12px; padding: 8px 14px; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-card-value { font-size: 20px; }
  .dash-lower { grid-template-columns: 1fr; }

  /* ─── KDS ─── */
  .kds-col-head { padding: 12px 14px; }
  .kds-ticket { padding: 12px; }
  .kds-ticket-num { font-size: 14px; }

  /* ─── FLOW ─── */
  .flow-card { max-width: 400px; padding: 22px 22px 20px; }
  .flow-device-area .pos-device { width: 230px; }

  /* ─── CHAT ─── */
  .chat-panel { width: 320px; height: 460px; }

  /* ─── LANDING NEW SECTIONS ─── */
  .preview-grid { grid-template-columns: repeat(2, 1fr); }
  #feature-preview { padding: 64px 36px; }
  #positioning { padding: 60px 36px; }
  /* ─── FEATURES PAGE HERO ─── */
  #features-hero { padding: 130px 36px 48px; }
}

/* ═══════════════════════════════════════════════════════
   SMALL MOBILE — ≤ 480px
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-headline { font-size: 24px; letter-spacing: -0.8px; }
  .hero-sub { font-size: 13px; }
  .pos-device { width: 190px; }
  .pos-items-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-item-card { padding: 10px 8px; }
  .pos-item-name { font-size: 11px; }
  .pos-item-badge { min-width: 18px; height: 18px; font-size: 10px; }
  .kds-col { min-width: 0; width: 100%; }
  .flow-device-area .pos-device { width: 180px; }
  .flow-device-area .pos-device .pos-statusbar { height: 30px; font-size: 8px; padding: 0 12px 3px; }
  .flow-device-area .pos-device .pos-appheader { padding: 3px 8px 4px; }
  .flow-device-area .pos-device .pos-appheader-logo img { height: 12px; }
  .flow-device-area .pos-device .pos-session-name { font-size: 7px; }
  .flow-device-area .pos-device .pos-session-sub { font-size: 6px; }
  .dash-metrics { grid-template-columns: 1fr; }
  .ob-title { font-size: 20px; }
  .feat-cluster-title { font-size: 17px; }
  .contact-title { font-size: 22px; }
  .flow-card-title { font-size: 15px; }
  /* Landing new sections */
  .preview-grid { grid-template-columns: 1fr; }
  #feature-preview { padding: 48px 16px; }
  #positioning { padding: 40px 16px; }
  .positioning-stats { flex-direction: column; gap: 20px; }
  .positioning-stat-num { font-size: 28px; }
  /* Features page hero */
  #features-hero { padding: 100px 20px 32px; }
  .features-hero-title { font-size: 28px; }
  .features-hero-sub { font-size: 14px; }

  /* ─── TERMINAL EXTRA SCALING — ≤480px ─── */
  .pos-statusbar { height: 34px; padding: 0 14px 4px; font-size: 9px; }
  .pos-appheader { padding: 4px 10px 5px; }
  .pos-appheader-logo img { height: 14px; }
  .pos-appheader-sep { height: 12px; }
  .pos-session-name { font-size: 8px; }
  .pos-session-sub { font-size: 7px; }
  .pos-home { bottom: 3px; width: 44px; }
  .sv { padding: 4px 8px 8px; }
  .sv-step { font-size: 6.5px; margin-bottom: 3px; }
  .sv-header { margin-bottom: 4px; }
  .sv-title { font-size: 10px; }
  .sv-sub { font-size: 8px; }
  .sv-btn { padding: 6px; font-size: 8.5px; }
  .sv-table-cell { aspect-ratio: 1.2; font-size: 7px; }
  .sv-table-grid { gap: 4px; }
  .sv-selection-note { font-size: 7px; padding-top: 3px; }
  .sv-cat-tab { padding: 3px 6px 4px; font-size: 8px; }
  .sv-menu-item { padding: 5px 6px; }
  .sv-menu-name { font-size: 7.5px; }
  .sv-menu-price { font-size: 7px; }
  .sv-strip-total { font-size: 9px; }
  .sv-strip-btn { padding: 4px 8px; font-size: 8px; }
  .sv-bill-row { font-size: 8px; }
  .sv-bill-row .amt { font-size: 8px; }
  .sv-bill-total { font-size: 9px; }
  .sv-cloud-wrap { width: 38px; height: 38px; }
  .sv-sync-title { font-size: 11px; }
  .sv-check-wrap { width: 38px; height: 38px; }
  .sv-ready-title { font-size: 11px; }
  .sv-served-list { padding: 5px 6px; }
  .sv-served-item { font-size: 8px; }
  .sv-ro-qr-area { padding: 1px 0 2px; }
  .sv-ha-list { gap: 3px; }
  .sv-ha-btn { padding: 6px 7px; font-size: 8px; gap: 6px; }
  .sv-ha-icon { width: 18px; height: 18px; }
  .sv-ha-checks { gap: 2px; }
  .sv-ha-check { padding: 4px 6px; font-size: 8px; }
  .sv-ha-tip-grid { gap: 3px; }
  .sv-ha-tip-btn { padding: 5px 3px; font-size: 8.5px; }
  .sv-done-ring { width: 34px; height: 34px; }
  .sv-done-label { font-size: 7px; }
  .sv-done-amount { font-size: 16px; }
  .sv-done-ref { font-size: 6.5px; margin-bottom: 6px; }
  .sv-done-row { padding: 4px 6px; font-size: 8px; }
  .sv-done-tick { width: 11px; height: 11px; }
  .sv-nfc-reader { width: 36px; height: 36px; }
  .sv-tap-card { width: 68px; height: 44px; padding: 4px 6px 3px; }
  .sv-approved { font-size: 10px; }
  .sv-txn-info { font-size: 7px; }
  .sv-pm-btn { padding: 7px 8px; gap: 6px; }
  .sv-pm-icon { width: 24px; height: 24px; }
  .sv-pm-name { font-size: 9px; }
  .sv-tip-btn { padding: 5px 3px; }
  .sv-tip-pct { font-size: 10px; }
  .sv-split-btn { padding: 8px; gap: 6px; }
  .sv-split-icon { width: 22px; height: 22px; font-size: 10px; }
  .sv-split-label { font-size: 9px; }
}