/* Paysense Marketing — responsive layer.
   Desktop design (≥ 1025px) is untouched. Below that we progressively
   collapse grids, reduce padding, and scale type. */

/* ─────────────────────────────────────────────
   Tablet (≤ 1024px)
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav container: tighter padding, hide the center nav links */
  [data-ps="nav-inner"] {
    padding: 16px 24px !important;
    gap: 20px !important;
  }
  [data-ps="nav-links"] { display: none !important; }
  [data-ps="nav-signin"] { display: none !important; }

  /* Hero: stack the two columns */
  [data-ps="hero-inner"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 96px 24px 72px !important;
  }
  [data-ps="hero-headline"] {
    font-size: clamp(40px, 7vw, 60px) !important;
    line-height: 1.04 !important;
  }
  [data-ps="hero-sub"] {
    font-size: 17px !important;
    max-width: 100% !important;
  }

  /* Logo garden: let items wrap more tightly */
  [data-ps="logos-inner"] {
    gap: 24px 32px !important;
    padding: 28px 24px !important;
  }

  /* Features: stack rows */
  [data-ps="features"] { padding: 0 !important; }
  [data-ps="features-inner"] {
    padding: 72px 24px !important;
    gap: 80px !important;
    min-width: 0;
  }
  [data-ps="feature-row"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    min-width: 0;
  }
  /* Restore source order on reversed rows */
  [data-ps="feature-text"]   { order: 1 !important; min-width: 0; }
  [data-ps="feature-visual"] { order: 2 !important; min-width: 0; overflow: hidden; }
  [data-ps="feature-title"] { font-size: 32px !important; }
  [data-ps="feature-body"] { max-width: 100% !important; }

  /* Integrations: stack sidebar + grid */
  [data-ps="integrations-inner"] { padding: 72px 24px !important; }
  [data-ps="integrations-grid-wrap"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-ps="integrations-sidebar"] { position: static !important; }
  [data-ps="integrations-grid"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Security */
  [data-ps="security-inner"] { padding: 72px 24px !important; }
  [data-ps="security-grid"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* FAQ */
  [data-ps="faq-inner"] { padding: 72px 24px !important; }
  [data-ps="faq-grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-ps="faq-sidebar"] { position: static !important; }

  /* Headings: shared shrink */
  [data-ps="section-h2"] { font-size: 32px !important; }

  /* Contact */
  [data-ps="contact"] { padding: 72px 24px !important; }
  [data-ps="contact-inner"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-ps="contact-sidebar"] { position: static !important; }
  [data-ps="product-cta-link"] { padding: 0 24px 64px !important; }

  /* CTA */
  [data-ps="cta"] { padding: 80px 24px !important; }
  [data-ps="cta-headline"] { font-size: clamp(36px, 6vw, 48px) !important; }

  /* Footer */
  [data-ps="footer"] { padding: 56px 24px 28px !important; }
  [data-ps="footer-inner"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
  [data-ps="footer-brand"] { grid-column: 1 / -1 !important; }
  [data-ps="footer-bottom"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}

/* ─────────────────────────────────────────────
   Mobile (≤ 720px)
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  [data-ps="nav-inner"] {
    padding: 14px 18px !important;
  }

  /* Hero */
  [data-ps="hero-inner"] {
    padding: 88px 18px 56px !important;
    gap: 32px !important;
  }
  [data-ps="hero-headline"] {
    font-size: clamp(34px, 9vw, 44px) !important;
    letter-spacing: -0.025em !important;
    margin: 16px 0 16px !important;
  }
  [data-ps="hero-sub"] {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
  }
  [data-ps="hero-cta-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-ps="hero-cta-row"] > button {
    width: 100% !important;
    justify-content: center !important;
  }
  [data-ps="hero-trust"] {
    margin-top: 32px !important;
    align-items: flex-start !important;
    line-height: 1.5 !important;
  }

  /* Product visual — shrink paddings */
  [data-ps="hero-visual-payrun-outer"] > div:last-child {
    padding: 20px 18px 20px !important;
  }
  [data-ps="payrun-kpis"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  [data-ps="payrun-kpis"] > div > div:last-child {
    font-size: 18px !important;
  }
  [data-ps="payrun-step-meta"] {
    display: none !important;
  }
  /* Code visual */
  [data-ps="hero-visual-code"] pre,
  [data-ps="feature-visual-api"] pre {
    font-size: 11px !important;
    line-height: 1.7 !important;
    overflow-x: auto !important;
  }
  [data-ps="hero-visual-code"],
  [data-ps="feature-visual-api"] {
    padding: 18px !important;
  }
  /* Diagram visual — stack */
  [data-ps="hero-visual-diagram"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }

  /* Logo garden: compact, wrap */
  [data-ps="logos-inner"] {
    padding: 24px 18px !important;
    gap: 16px 24px !important;
  }
  [data-ps="logos-inner"] > span {
    font-size: 15px !important;
  }

  /* Features */
  [data-ps="features-inner"] {
    padding: 56px 18px !important;
    gap: 56px !important;
  }
  [data-ps="feature-title"] { font-size: 28px !important; }
  [data-ps="feature-body"] { font-size: 16px !important; }
  [data-ps="feature-compliance-grid"],
  [data-ps="security-cards"] {
    grid-template-columns: 1fr !important;
  }
  [data-ps="feature-scale-metrics"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Integrations */
  [data-ps="integrations-inner"] { padding: 56px 18px !important; }
  [data-ps="integrations-grid"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [data-ps="section-h2"] { font-size: 28px !important; }

  /* Security */
  [data-ps="security-inner"] { padding: 56px 18px !important; }

  /* FAQ */
  [data-ps="faq-inner"] { padding: 56px 18px !important; }
  [data-ps="faq-question"] {
    font-size: 16px !important;
    padding: 18px 0 !important;
  }

  /* Contact */
  [data-ps="contact"] { padding: 56px 18px !important; }
  [data-ps="product-cta-link"] { padding: 0 18px 56px !important; }

  /* CTA */
  [data-ps="cta"] { padding: 64px 18px !important; }
  [data-ps="cta-headline"] { font-size: clamp(30px, 8vw, 40px) !important; }
  [data-ps="cta-cta-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-ps="cta-cta-row"] > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer */
  [data-ps="footer"] { padding: 48px 18px 24px !important; }
  [data-ps="footer-inner"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  [data-ps="footer-brand"] { grid-column: 1 / -1 !important; }
}

/* ─────────────────────────────────────────────
   Very small (≤ 380px) — tiny fine-tuning
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
  [data-ps="payrun-kpis"] {
    grid-template-columns: 1fr !important;
  }
  [data-ps="integrations-grid"] {
    grid-template-columns: 1fr !important;
  }
  [data-ps="feature-scale-metrics"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────
   Mobile nav (hamburger) — only shown ≤ 1024px
   ───────────────────────────────────────────── */
[data-ps="mobile-menu-btn"] { display: none; }
@media (max-width: 1024px) {
  [data-ps="mobile-menu-btn"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    margin-left: auto;
    color: inherit;
    transition: background 160ms var(--ps-ease-out);
  }
  [data-ps="mobile-menu-btn"]:hover { background: rgba(127,127,127,0.08); }
}

[data-ps="mobile-sheet"] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms var(--ps-ease-out), opacity 180ms var(--ps-ease-out);
}
[data-ps="mobile-sheet"][data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ContactForm: stack name/company fields on mobile */
@media (max-width: 680px) {
  .contact-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* HeroVisualFloat: simplify payrun table on mobile */
@media (max-width: 600px) {
  .payrun-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .payrun-col-hide-mobile {
    display: none !important;
  }
}