h1, h2 { margin: 0 0 var(--space-24); }
p { margin: 0 0 var(--space-16); }
.site-header, main, footer { width: min(100% - 2 * var(--gutter), var(--content-width)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-block: var(--space-24); border-bottom: 1px solid var(--line); }
.site-header a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.site-header a:first-child { color: var(--ink); font-weight: var(--weight-heading); }
.site-header a:last-child { font-size: var(--font-small); }
main { padding-block: var(--section-space); }
main > p, .usage { max-width: 800px; }
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-32); }
.logo-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.asset-preview { display: flex; align-items: center; justify-content: center; height: 264px; padding: var(--card-padding); background-color: var(--surface); }
.asset-preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.transparent-preview { background-image: conic-gradient(var(--surface-alt) 25%, var(--surface) 0 50%, var(--surface-alt) 0 75%, var(--surface) 0); background-size: var(--space-24) var(--space-24); }
.dark-preview { background-color: var(--brand-navy); background-image: conic-gradient(color-mix(in srgb, var(--brand-navy), var(--brand-white) 6%) 25%, var(--brand-navy) 0 50%, color-mix(in srgb, var(--brand-navy), var(--brand-white) 6%) 0 75%, var(--brand-navy) 0); }
.card-content { padding: var(--card-padding); border-top: 1px solid var(--line); }
.card-content h2 { margin-bottom: var(--space-16); }
.downloads { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-24) var(--space-8); }
.downloads a { color: var(--brand-white); background: var(--accent); text-decoration: none; }
.downloads a:hover { text-decoration: underline; }
.copy-link { display: inline-flex; align-items: center; min-height: var(--control-height); }
.file-details { font-size: var(--font-small); margin: var(--space-8) 0 0; }
.usage { margin-top: var(--section-space); }
footer { padding-block: var(--space-24); border-top: 1px solid var(--line); font-size: var(--font-small); }
footer a { display: inline-flex; align-items: center; min-height: var(--control-height); }
@media (max-width: 700px) {
  .site-header { flex-wrap: wrap; padding-block: var(--space-16); }
  .logo-grid { grid-template-columns: 1fr; }
  .asset-preview { height: 220px; }
}