.hero-img{margin:0 0 8px}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:1360/765;border-radius:6px;background:#fff}
.diagram{margin:20px 0;padding:14px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;text-align:center;overflow-x:hidden}
.diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px;font-size:14px;line-height:1.55}
.card h3{margin:0 0 8px;font-size:.9375rem}
.card p{margin:0 0 8px}
.card p:last-child{margin-bottom:0}
pre.shape{margin:12px 0 20px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:720px){.cards{grid-template-columns:1fr}}