/* ============================================================
   responsive.css — 4-breakpoint system (1024/768/600/480px)
                    Touch, landscape, iOS safe-area, retina
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — FAANG-grade, 4-breakpoint system
   Breakpoints: 1024px | 768px | 600px | 480px
   Touch, retina, landscape, safe-area all covered.
   ══════════════════════════════════════════════════════════ */

/* ── Base touch & tap improvements (all sizes) ──────── */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { touch-action: manipulation; }

/* ── Hamburger & mobile menu (defined once, controlled by MQ) ── */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--t1);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.nav-hamburger:hover { background: var(--bg3); color: var(--t0); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 12px;
  right: 12px;
  background: var(--bg1);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 8px;
  z-index: 49;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  animation: menuFadeIn 0.18s ease;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--t0);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.12s;
}
.nav-mobile-menu a:hover,
.nav-mobile-menu a:active { background: var(--bg2); }
.nav-mobile-divider {
  height: 1px;
  background: var(--pb);
  margin: 6px 8px;
}
.nav-mobile-menu .nav-mobile-cta {
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile-menu .nav-mobile-cta .btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 14.5px;
  border-radius: 10px;
}

/* ── 1024px — Laptop / Large tablet ─────────────────── */
@media (max-width: 1024px) {
  .wrap { padding: 0 24px; }

  /* Nav */
  nav { margin: 10px 16px 0; max-width: none; padding: 10px 14px; }
  nav ul { display: none; }
  .nav-tqs { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero { padding: 64px 0 44px; }

  /* App shot — collapse to single pane (editor only) */
  .shot-body {
    grid-template-columns: 1fr;
    height: 340px;
  }
  .shot-body > *:nth-child(-n+4) { display: none; }

  /* 2-col features */
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat.tall { grid-column: span 2; }

  /* Variables — stack */
  .var-demo-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Workspace showcase — stack */
  .ws-show {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 44px 36px;
  }
  .ws-show h3 { font-size: 28px; }

  /* Privacy — 2 col */
  .privacy-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing — stack centered */
  .price-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }

  /* Footer — 2×2 grid */
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ft-grid > div:first-child { grid-column: span 2; }

  /* Section spacing */
  .sec { padding: 88px 0; }
  .privacy { padding: 88px 0; }

  /* CTA */
  .cta-final { padding: 52px 36px; margin: 64px 16px 88px; }
}

/* ── 768px — Tablet / large phone ───────────────────── */
@media (max-width: 768px) {
  .wrap { padding: 0 20px; }

  /* Nav */
  nav { max-width: calc(100% - 24px); margin: 8px 12px 0; padding: 9px 12px; gap: 10px; }
  .nav-right { gap: 10px; }
  .btn-primary { padding: 8px 14px; font-size: 13px; }

  /* Hero */
  .hero { padding: 52px 0 36px; }
  h1 { font-size: clamp(32px, 8.5vw, 52px); }
  .lede { font-size: 15.5px; max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: center; gap: 10px; }
  .hero-cta .btn-lg { width: 100%; max-width: 340px; justify-content: center; padding: 13px 20px; }
  .hero-meta { gap: 10px; font-size: 11.5px; flex-wrap: wrap; justify-content: center; }

  /* Shot */
  .shot { margin-top: 32px; border-radius: 10px; }
  .shot-body { height: 260px; }

  /* Trust strip */
  .trust-row { gap: 20px; flex-wrap: wrap; }
  .trust-row .name { font-size: 14px; }

  /* Sections */
  .sec { padding: 68px 0; }
  .sec h2 { font-size: clamp(24px, 6.5vw, 40px); }
  .sec .sub { font-size: 15px; margin-bottom: 36px; }
  .sec-head-row { flex-direction: column; gap: 16px; margin-bottom: 36px; }
  .sec-head-row .sub { max-width: 100%; }

  /* Features — 1 col */
  .feat-grid { grid-template-columns: 1fr; }
  .feat.tall { grid-column: span 1; }

  /* Variables */
  .demo-prompt { min-height: 180px; font-size: 12px; }

  /* Workspace */
  .ws-show { padding: 32px 22px; gap: 28px; }
  .ws-show h3 { font-size: 22px; }

  /* Privacy — 1 col */
  .privacy { padding: 68px 0; }
  .privacy-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  /* Pricing */
  .price-grid { max-width: 440px; margin: 0 auto; padding: 0; }
  .price-card { padding: 26px 22px; }

  /* FAQ */
  .faq { max-width: 100%; }
  .faq-q { font-size: 14.5px; }
  .faq-a { font-size: 13.5px; margin-left: 0; padding-left: 2px; }

  /* CTA */
  .cta-final { padding: 40px 24px; margin: 44px 12px 64px; border-radius: 16px; }
  .cta-final h2 { font-size: clamp(24px, 7vw, 40px); }
  .cta-final p { font-size: 15px; }
  .cta-final .hero-cta { flex-direction: column; align-items: center; gap: 10px; }
  .cta-final .hero-cta .btn-lg { width: 100%; max-width: 340px; }

  /* Footer */
  footer { padding: 40px 0 32px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft-grid > div:first-child { grid-column: span 2; }
  .ft-blurb { max-width: 100%; }
  .ft-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .ft-bottom span:last-child { justify-content: center; }

  /* Modal */
  .modal { padding: 28px 22px 24px; margin: 12px; max-width: none; border-radius: 14px; }
}

/* ── 600px — Medium phone ────────────────────────────── */
@media (max-width: 600px) {
  /* Shot — hide on medium phones; too cramped */
  .shot { display: none; }

  /* Hero */
  .hero { padding: 44px 0 28px; }
  .lede { font-size: 15px; }
  .hero-meta { flex-direction: column; gap: 6px; align-items: center; }

  /* Trust */
  .trust-row .name { font-size: 13px; }
  .trust-row { gap: 14px; }

  /* Workspace */
  .ws-show { padding: 28px 18px; }

  /* Footer — full stack */
  .ft-grid { grid-template-columns: 1fr; gap: 24px; }
  .ft-grid > div:first-child { grid-column: span 1; }
}

/* ── 480px — Small phone ─────────────────────────────── */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }

  /* Nav */
  nav { max-width: calc(100% - 20px); margin: 6px 10px 0; padding: 8px 10px; border-radius: 10px; top: 8px; }
  .logo { font-size: 13px; gap: 7px; }
  .logo-mark { width: 26px; height: 26px; border-radius: 6px; }
  /* Hide "LOCAL PROMPT LIBRARY" subtitle on small screens */
  .logo > span > span:last-child { display: none; }
  .btn-primary { padding: 7px 11px; font-size: 12.5px; }
  .btn-primary svg { display: none; }

  /* Hero */
  .hero { padding: 40px 0 24px; }
  h1 { font-size: clamp(26px, 9.5vw, 38px); letter-spacing: -0.025em; line-height: 1.08; }
  .pill { font-size: 11px; padding: 4px 9px 4px 5px; gap: 6px; }
  .pill-tag { font-size: 9.5px; }
  .lede { font-size: 14.5px; }
  .hero-cta .btn-lg { font-size: 14px; padding: 12px 18px; max-width: 100%; }
  .hero-meta span { font-size: 11px; }

  /* Sections */
  .sec { padding: 52px 0; }
  .sec h2 { font-size: clamp(20px, 7.5vw, 30px); }
  .sec-tag { font-size: 10px; }

  /* Features */
  .feat { padding: 20px 18px; }
  .feat h3 { font-size: 15px; }

  /* Workspace */
  .ws-show { padding: 24px 16px; gap: 22px; }
  .ws-show h3 { font-size: 20px; }
  .ws-show p { font-size: 14px; }

  /* Privacy */
  .priv-card { padding: 20px; }
  .privacy { padding: 52px 0; }

  /* Pricing */
  .price-card { padding: 22px 18px; }
  .price-amt { font-size: 36px; }
  .price-grid { max-width: 100%; }

  /* FAQ */
  .faq-q { font-size: 13.5px; gap: 10px; }
  .faq-q .num { display: none; }
  .faq-a { font-size: 13px; }

  /* CTA */
  .cta-final { padding: 28px 16px; margin: 32px 8px 52px; }
  .cta-final h2 { font-size: clamp(20px, 8vw, 30px); }

  /* Footer */
  footer { padding: 32px 0 24px; }
  .ft-grid { gap: 20px; }

  /* Modal */
  .modal { padding: 24px 18px 20px; border-radius: 12px; margin: 8px; }
  .modal h3 { font-size: 18px; }

  /* Prevent iOS double-tap zoom on inputs */
  input, select, textarea { font-size: 16px !important; }

  /* Mobile menu position on small screens */
  .nav-mobile-menu { top: 62px; left: 8px; right: 8px; border-radius: 12px; }
}

/* ── Touch / no-hover devices ────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only transform effects */
  .feat:hover { transform: none; border-color: var(--pb); }
  .btn-primary:hover { transform: none; filter: none; }
  .ws-list-row:hover { background: transparent; }
  /* Increase tap targets to 44px minimum (WCAG) */
  nav ul a { padding: 10px 14px; min-height: 44px; display: flex; align-items: center; }
  .faq-item { padding: 20px 0; }
  .faq-q { min-height: 44px; }
  .ft-grid a { min-height: 36px; display: inline-flex; align-items: center; }
  .nav-mobile-menu a { min-height: 48px; display: flex; align-items: center; }
}

/* ── Landscape phone ─────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 28px 0 16px; }
  .shot { display: none; }
  .sec { padding: 44px 0; }
  .privacy { padding: 44px 0; }
  .nav-mobile-menu { top: 60px; max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-mobile-menu a { padding: 9px 14px; font-size: 14px; }
}

/* ── iOS safe area (notch / home bar) ────────────────── */
@supports (padding: max(0px)) {
  nav {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  footer .wrap {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .nav-mobile-menu {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }
}

/* ── Force desktop nav above 1025px ─────────────────── */
@media (min-width: 1025px) {
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
  nav ul { display: flex !important; }
}