.split-section {
  padding: clamp(48px, 7vh, 88px) 0;
  background: var(--paper);
}

.split-section-alt { background: var(--paper-warm); }

/* Alternating copy and visual, the reference page's core section rhythm. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split-copy { min-width: 0; }
.split-visual { min-width: 0; }

/* Reversed on the second split. Order is swapped rather than direction, so the
   reading order in the markup stays correct for screen readers. */
.split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.split-reverse .split-copy { order: 2; }
.split-reverse .split-visual { order: 1; }

.split-list { margin-top: 22px; }

.split-item {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  padding: 14px 0 14px 20px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.split-item:last-child { border-bottom: 1px solid var(--rule); }

.split-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

@media (max-width: 940px) {
  .split,
  .split-reverse { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split-reverse .split-copy,
  .split-reverse .split-visual { order: initial; }
}

/* Rendered mockups. Intrinsic ratio reserves layout space so the copy beside
   them never shifts while they load. */
.split-shot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
}