/* ============================================================
   StudioLocker — Version A — responsive layer
   Breakpoints: 1024 / 860 / 768 / 640 / 430
   ============================================================ */

@media (max-width: 1024px) {
  .steps, .steps.steps-3 { grid-template-columns: repeat(2, 1fr); }
  .steps-connector { display: none; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4, .span-6 { grid-column: span 2; }
  .bento .span-2 { grid-column: span 1; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .header-actions .btn-ghost { display: none; }
  .nav-toggle { display: block; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 38em; }

  .feature-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .feature-row.reverse .f-media { order: 0; }

  .contact-split { grid-template-columns: 1fr; }

  /* one column, not two: these are 1080p screen recordings of a dense UI, and
     half-width cards make the interface in them unreadable */
  .guide-grid { grid-template-columns: 1fr; }

}

@media (max-width: 768px) {
  :root { --header-h: 60px; }

  .trust-inner { flex-direction: column; align-items: flex-start; }

  .format-groups { grid-template-columns: 1fr; }

  .bento { grid-template-columns: 1fr; }
  .bento .span-2,
  .span-3, .span-4, .span-6 { grid-column: span 1; }

  .split-vis {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .split-paths { height: 44px; }

  .custody-step { grid-template-columns: 40px 1fr; gap: var(--sp-3); }
  .custody-step .c-node { width: 40px; height: 40px; }
  .custody-step:not(:last-child)::before { left: 19px; top: 40px; }
}

@media (max-width: 640px) {
  /* the mobile menu carries both CTAs; keep the header to brand + hamburger */
  .header-actions .btn-primary { display: none; }

  .steps, .steps.steps-3 { grid-template-columns: 1fr; }

  .hero-ctas .btn { flex: 1 1 auto; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-bottom { flex-direction: column; }

  .tab-btn { padding: 14px 16px; font-size: 0.85rem; }
}

@media (max-width: 430px) {
  :root { --fs-body: 1rem; }

  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .pipeline-vis { padding: 1rem; }
  .recipient-card .r-mail { display: none; }

  .btn { min-height: 46px; } /* touch target */
  .acc-trigger { padding: 16px; font-size: 0.95rem; }

  .pipeline-footer { flex-direction: column; gap: 4px; }
}

/* reCAPTCHA's iframe is a fixed 304px wide, which otherwise sets a floor on the
   form column and pushes the whole page wider than a narrow phone. `zoom` shrinks
   the layout box as well as the paint, so the widget fits instead of overflowing
   (a `transform` would scale it visually but leave the 304px in layout). */
@media (max-width: 400px) {
  .recaptcha-holder { zoom: 0.9; }
  .form-card { padding: 1.15rem; } /* buys back width for the widget on small phones */
}
@media (max-width: 360px) { .recaptcha-holder { zoom: 0.8; } }
@media (max-width: 330px) { .recaptcha-holder { zoom: 0.72; } }