/* Two-column layout mirroring the adopt page: form left, sticky
     "What to expect" 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 > .reassure { grid-column: 2; grid-row: 1; }
  .reassure {
    background: var(--soft-green); 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) */
  }
  .reassure h3 { font-size: 20px; margin-bottom: 12px; }
  .reassure ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .reassure li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
  .reassure .check {
    flex: 0 0 24px; height: 24px; border-radius: 50%;
    background: var(--green); color: var(--paper);
    display: grid; place-items: center; border: 2px solid var(--ink);
    font-weight: 800; font-size: 13px;
  }
  @media (max-width: 980px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid > .form-main, .form-grid > .reassure { grid-column: auto; grid-row: auto; }
    .reassure { position: static; }
  }
  /* This hero copy is longer than the other forms'; lift the shared 30ch
     cap (crayon.css) so it sits on one line instead of wrapping. */
  .page-hero h1 { max-width: none; }