/* Glide — mobile/tablet polish layer. Loaded after styles + mobile css.
   Scoped to <=820px (and a tablet hero fix), logical properties only so RTL (fa) mirrors correctly. */

@media (max-width: 820px) {
  :root { --hdr-h: 56px; --pad: 18px; }
  html { scroll-padding-top: calc(var(--hdr-h) + 12px); -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); overflow-x: clip; }

  /* ---------- header: docked, solid, no text bleeding through ---------- */
  .header-pill {
    max-width: none !important; width: 100%; height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important; border-width: 0 0 1px 0 !important;
    padding-inline: 16px 8px !important; gap: 8px;
    padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box;
    background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: none !important;
  }
  .header-controls { gap: 2px; }
  .header-controls .util-btn { min-width: 44px; min-height: 44px; }
  .brand-logo { height: 26px; width: auto; }

  /* menu: full-width sheet under the header with a scrim */
  .mobile-drawer {
    position: fixed !important; inset: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)) 0 auto 0 !important;
    width: auto !important; margin: 0 !important; max-height: calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; border-radius: 0 0 22px 22px !important; border-width: 0 0 1px 0 !important;
    padding: 8px var(--pad) 18px !important; background: var(--bg) !important;
    box-shadow: 0 30px 60px -20px #000a;
  }
  .site-header:has(.mobile-drawer:not([hidden]))::after {
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(5, 6, 12, .55);
  }
  .mobile-nav-links { display: flex; flex-direction: column; }
  .mobile-nav-link {
    display: flex !important; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 4px !important; font-size: 1.05rem; font-weight: 700;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav-link::after { content: "›"; color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
  [dir="rtl"] .mobile-nav-link::after { content: "‹"; }
  .mobile-drawer-footer { margin-top: 16px; }

  /* ---------- hero ---------- */
  .hero { padding-top: calc(var(--hdr-h) + 28px) !important; }
  .hero-lede { font-size: 1rem !important; line-height: 1.65 !important; max-width: 34em; margin-inline: auto; text-wrap: pretty; }
  .hero-actions { gap: 10px !important; }
  .hero-actions .btn { min-height: 52px; border-radius: 16px; }
  .view-switcher .view-btn, .showcase-toolbar .zoom-trigger-btn { min-height: 44px; }

  /* ---------- sections: consistent gutters, calmer rhythm ---------- */
  .wrap { width: min(100% - 2 * var(--pad), var(--wrap)); }
  .section-head { text-align: start; }
  .section-title { letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
  .section-sub { line-height: 1.6; text-wrap: pretty; }

  /* feature rail: clearer card edges + peek of the next card */
  .bento .tile {
    flex-basis: 84% !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: 0 14px 30px -18px #0007, var(--glass-hi);
    background: var(--panel-solid) !important;
  }
  .m-dots { margin-top: 10px; }
  .m-dot { height: 8px; width: 8px; }
  .m-dot.is-active { width: 22px; }

  /* tabs / chips: real touch targets, fade hint that they scroll */
  .details-tab, .proto-chip, .vs-filter-btn, .scenario-btn { min-height: 44px; }
  .details-tabs-bar, .vs-filter-bar, .proto-chips-bar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  [dir="rtl"] .details-tabs-bar, [dir="rtl"] .vs-filter-bar, [dir="rtl"] .proto-chips-bar {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }

  /* fold buttons + FAQ: bigger, easier taps */
  .m-fold-btn { min-height: 58px; border-radius: 18px; }
  .faq-item summary { min-height: 58px; padding: 14px 18px; line-height: 1.4; }
  .faq-item { border-radius: 18px; }

  /* download cards */
  .dl-pkg-row { border-radius: 20px; }
  .dl-pkg-btn { min-height: 48px; }

  /* ---------- footer ---------- */
  .site-footer { padding: 32px var(--pad) 36px !important; }
  .site-footer .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .footer-brand-col, .footer-brand { text-align: center; justify-content: center; }
  .footer-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px; width: 100%; max-width: 360px; }
  .footer-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-weight: 600; }
  .footer-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- tablets (601–820): show the whole app window instead of the phone crop ---------- */
@media (min-width: 601px) and (max-width: 820px) {
  .screenshot-viewport { aspect-ratio: auto !important; overflow: visible; }
  .hero-app-screen, .hero-app-screen[src*="main-fa"] {
    position: static !important; width: 100% !important; left: auto !important; top: auto !important; height: auto;
  }
  .m-zoom-chip { display: none; }
  .hero-copy { max-width: 680px; margin-inline: auto; }
  .bento .tile { flex-basis: 46% !important; max-width: 360px !important; }
  .sticky-cta .btn { max-width: 380px; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  :root { --pad: 16px; }
  .hero-headline { font-size: clamp(2rem, 10.5vw, 2.4rem) !important; }
  .header-controls .util-btn { min-width: 40px; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .site-header, .mobile-drawer, .sticky-cta { transition: none !important; } }