.form-split { padding-block: var(--section-pad); }
.form-split--pad-top { padding-bottom: 0; }
.form-split--pad-bottom { padding-top: 0; }
.form-split--pad-none { padding-block: 0; }
.form-split {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.form-split__inner { gap: var(--form-split-gap, 44px); }
.form-split__heading { margin: 16px 0 18px; white-space: pre-line; }
.form-split__lede { max-width: 46ch; }
.form-split__checks { gap: 12px; margin-top: 26px; font-size: 15px; }
.form-split__check { align-items: flex-start; gap: 12px; }

/* The panel is the shared surface with the band's card colours (a dark panel on a dark band).
   "band" swaps it to the scheme's own background, for a solid panel sitting on the page colour. */
.form-split .form-split__panel {
  background: rgba(var(--color-card-background));
  border: 1px solid rgba(var(--color-text), 0.2);
  border-radius: var(--radius-xl);
  padding: var(--form-split-panel-pad, 28px);
}
.form-split .form-split__panel--band { background: rgba(var(--color-background)); }
.form-split .form-split__panel--flush { border: 0; }
.form-split__panel-title { color: rgba(var(--color-text)); }
.form-split__panel-title--display { font-size: var(--form-split-panel-title-size, 20px); line-height: 1; }
.form-split__panel-note {
  font-size: var(--form-split-panel-note-size, 14px); line-height: 1.6;
  color: rgba(var(--color-light-text));
  margin: var(--form-split-panel-title-gap, 8px) 0 var(--form-split-panel-note-gap, 22px);
}
.form-split__form { gap: var(--form-split-field-gap, 14px); }
.form-split__submit { margin-top: var(--form-split-submit-gap, 0px); }
.form-split__callout {
  background: rgba(var(--color-button-background)); color: rgba(var(--color-button-text));
  border-radius: var(--radius); padding: 26px;
}
.form-split__callout-title { font-size: 20px; }
.form-split__callout-text { margin-top: 10px; line-height: 1.5; }
/* `a:not(.button)` (0,2,1) outranks a bare class, so the callout link needs the same shape to
   keep the source's underline. */
a.form-split__callout-link:not(.button) { color: inherit; text-decoration: underline; }
/* An explicit max-width lets one instance sit in a container the shared --wrap steps don't cover. */
.form-split__wrap { max-width: var(--form-split-container, var(--wrap)); }
@media (max-width: 900px) {
  .form-split__inner { gap: 28px; }
  .form-split .form-split__panel { padding: var(--form-split-panel-pad-narrow, 22px); }
}