/* ═══════════════════════════════════════════════════════════════
   responsive.css — v3 responsive rules (added 2026-05-14)
   Linked AFTER v3.css and product.css so these rules win the cascade.
   Breakpoint scale: 1024px tablet · 768px large phone · 480px phone.
   (Mobile nav uses 960px to align with product.css's existing nav query.)
═══════════════════════════════════════════════════════════════ */

/* ───── Homepage footer ───── */
.home-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--space-32);
  border-top: 1px solid color-mix(in oklab, var(--bg), transparent 78%);
  padding-top: var(--space-40);
}
.home-footer-bottom {
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: 1px solid color-mix(in oklab, var(--bg), transparent 78%);
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--text-12);
  color: color-mix(in oklab, var(--bg), transparent 25%);
}
@media (max-width: 768px) {
  .home-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-24); }
  .home-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .home-footer-grid { grid-template-columns: 1fr; gap: var(--space-24); }
  .home-footer-bottom { flex-direction: column; gap: var(--space-8); }
}

/* ───── Hero & pipeline ───── */
@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-ctas .btn { justify-content: center; }
  .pipeline-stage-head { padding: var(--space-10) var(--space-8); font-size: var(--text-9); }
}

/* ───── #case — testimonial + metrics split ───── */
.case-grid {
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-80);
  align-items: start;
}
@media (max-width: 1024px) {
  .case-grid { gap: var(--space-48); }
}
@media (max-width: 768px) {
  .case-grid { grid-template-columns: 1fr; gap: var(--space-40); }
}

/* ───── #security ───── */
.security-split {
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-48);
  align-items: start;
}
.security-certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.security-cert {
  padding: var(--space-24);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
}
@media (max-width: 1024px) {
  .security-split { gap: var(--space-48); }
}
@media (max-width: 768px) {
  .security-split { grid-template-columns: 1fr; gap: var(--space-40); }
  .security-certs { grid-template-columns: 1fr; }
  /* Override inline min-height: 180px on the home cards so heights flow with content */
  .security-cert { padding: var(--space-24); min-height: 0 !important; }
}

/* ───── #pricing ───── */
.pricing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
  margin-bottom: var(--space-64);
}
.pricing-factors {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
@media (max-width: 768px) {
  .pricing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
    margin-bottom: var(--space-40);
  }
  .pricing-factors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pricing-factors { grid-template-columns: 1fr; }
}