/* Two-column layout mirroring the adopt/surrender/fundraising pages: form
   left, sticky "how it works" card right. The card is first in the markup
   (so it stacks above the form on mobile) and placed into column 2 here. */
.form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.form-grid > .form-main { grid-column: 1; grid-row: 1; }
.form-grid > .info-card { grid-column: 2; grid-row: 1; }
.info-card {
  background: var(--soft-yellow); border: 3px solid var(--ink); border-radius: 22px;
  padding: 24px; box-shadow: 6px 6px 0 var(--ink);
  position: sticky; top: 104px; /* clears the sticky nav (~81px) */
}
@media (max-width: 980px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .form-main, .form-grid > .info-card { grid-column: auto; grid-row: auto; }
  .info-card { position: static; }
}