/* Mesh zone sections let the fixed mesh layer sit between their background and their text. */
.story ~ section.mz { position: relative; z-index: auto; background: none; }
section.mz::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--bg); }
section.mz.alt::before { background: var(--card); }
section.mz.dark::before { background: var(--night); }
section.mz > .wrap { position: relative; z-index: 2; }
.mesh-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mesh-stage { position: absolute; transform: translateY(-50%); }
.mesh-stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.mesh-deco text { pointer-events: none; }
/* Layouts: text + slot (slot right), .rev (slot left), .split3 (slot centre between two text columns). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 92vh; padding: 30px 0; }
.split.rev > .slot { order: -1; }
.split3 { display: grid; grid-template-columns: .8fr 1.6fr .8fr; gap: 36px; align-items: center; min-height: 92vh; padding: 30px 0; }
.split > *, .split3 > * { min-width: 0; }
.slot { align-self: stretch; min-height: 50vh; }
.split3 h2 { font-size: clamp(26px, 2.4vw, 34px); }
.split3 .sources { grid-template-columns: 1fr; }
.split3 .stat { padding: 18px 20px; }
.split3 .stat b { font-size: 38px; }
.rest-block { min-height: 70vh; }
.bg-block { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pic-only { display: none; }
.mesh-static .pic-only { display: block; max-width: 520px; margin: 30px auto 0; min-height: 0; }
.mesh-pic { width: 100%; max-width: 560px; display: block; margin: 0 auto; }

/* Content that normally spans the page, stacked into one column. */
.split .flow, .split3 .flow { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
.split .flow .arrow, .split3 .flow .arrow { transform: rotate(90deg); justify-self: center; font-size: 20px; }
.split .sources { grid-template-columns: 1fr 1fr; }
.split .feature, .split3 .feature { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
.split .grid.g3, .split3 .grid.g3 { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
.split .card, .split3 .card { padding: 20px 22px; }
.split .built-list { grid-template-columns: 1fr; }
.split .stats, .split3 .stats { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.split3 .stats { grid-template-columns: 1fr; }
.split .stat b { font-size: 44px; }
.split .roadmap { grid-template-columns: 1fr; gap: 26px; }
.split .roadmap::before { display: none; }
.split .quote { margin-top: 36px; }
.split .quote p { font-size: clamp(19px, 1.7vw, 23px); }
.split .illus-t { margin-top: 28px; }
.split .note { margin-top: 20px; }

@media (max-width: 960px) {
  .split, .split3 { grid-template-columns: 1fr; min-height: 0; gap: 22px; padding: 10px 0 30px; }
  .split > .slot, .split3 > .slot { order: -1; min-height: 0; }
  .split3 > .slot { order: 0; }
  .rest-block, .bg-block { min-height: 0; }
  .slot-empty { aspect-ratio: auto; }
  .split .stats, .split3 .stats { grid-template-columns: 1fr; }
}