:root {
  --legal-ink: #263238;
  --legal-muted: #607d8b;
  --legal-brand: #607d8b;
  --legal-line: rgba(38, 50, 56, .14);
}

body { margin: 0; }
main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 64px; }
.site-header, footer { box-sizing: border-box; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header { display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--legal-ink); font-size: 20px; font-weight: 760; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 8px 20px rgba(38, 50, 56, .16); }
.site-nav { display: flex; align-items: center; gap: 30px; color: #455a64; font-size: 14px; font-weight: 650; }
.site-nav a, footer a { color: inherit; text-decoration: none; }
.site-nav a:hover, footer nav a:hover { color: var(--legal-brand); }
footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 45px; border-top: 1px solid var(--legal-line); color: var(--legal-muted); font-size: 13px; }
footer p { text-align: center; }
footer nav { display: flex; gap: 22px; }
footer small { grid-column: 1 / -1; color: #90a4ae; }

@media (max-width: 720px) {
  .site-header { width: min(100% - 32px, 1180px); }
  .site-nav { gap: 14px; }
  footer { grid-template-columns: 1fr; justify-items: center; }
  footer p { margin: 0; }
  footer small { grid-column: auto; }
}

@media (max-width: 430px) {
  .site-header { align-items: flex-start; padding-top: 18px; }
  .brand { font-size: 18px; }
  .site-nav { flex-direction: column; align-items: flex-end; gap: 6px; }
}