/* Układ strony; kolory, kroje i odstępy wyłącznie z design/tokens/tokens.css */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: var(--type-body-size); line-height: var(--type-body-line); }
main { max-width: 1200px; margin: 0 auto; padding: 72px 24px 96px; }
.hero { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.hero-mark { display: flex; justify-content: center; }
.lead { font-size: var(--type-lead-size); line-height: var(--type-lead-line); max-width: 36em; margin: 0; }
@media (max-width: 720px) {
  main { padding: 40px 24px 64px; }
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero-mark .es-logo-svg { height: 160px; }
}