body[data-page="cost"] .hero { max-width: 920px; }
body[data-page="cost"] .hero h1 { max-width: 15ch; }
body[data-page="cost"] .flow { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 64px; align-items: start; }
body[data-page="cost"] .flow > section { grid-column: 1; }
body[data-page="cost"] .sum { padding: 32px 36px; }
body[data-page="cost"] .art { grid-column: 2; grid-row: 1 / 3; margin-top: 32px; min-height: 450px; border-radius: 140px 140px 4px 4px; }
body[data-page="cost"] .art img { position: absolute; inset: 0; object-position: 42% center; }
body[data-page="cost"] .sb { border-top: 6px solid var(--pine); }
body[data-page="cost"] .sb ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 980px) {
  body[data-page="cost"] .flow { grid-template-columns: 1fr; }
  body[data-page="cost"] .art { grid-column: 1; grid-row: auto; min-height: 0; height: 190px; margin: 24px 0; border-radius: 4px 70px 4px 4px; }
  body[data-page="cost"] .art img { object-position: center; }
}
@media (max-width: 760px) {
  body[data-page="cost"] .sum { padding: 28px 24px; }
  body[data-page="cost"] .sb ul { grid-template-columns: 1fr; }
}
@media print {
  body[data-page="cost"] .flow { display: block; }
}