/* pages.css — only the layout helpers the two conversion pages need on top of
   styles.css (form + side-panel split, benefit grid, status-state list). */

.split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1040px) {
  .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; }
  .split__aside { position: sticky; top: 84px; }
}

.benefits { display: grid; gap: 12px; }
@media (min-width: 680px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benefit { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-1); }
.benefit__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.benefit__top b { font-size: 1rem; letter-spacing: -.01em; }
.benefit p { margin: 0; font-size: .9375rem; color: var(--muted); }

.states { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.states li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); }
.states b { font-size: .9375rem; }
.states span { font-size: .9375rem; color: var(--muted); }
@media (max-width: 620px) { .states li { grid-template-columns: 1fr; } }

/* used by the shared header on every page, missing from styles.css */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the shared footer grid overflows between ~760 and ~900px; min-width:0 lets it fit */
.f-grid > * { min-width: 0; }

/* wider size/spec fields when the form sits in the narrower desktop column */
@media (min-width: 1040px) {
  .split .line { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, 1fr) 92px auto; }
}