.brand-intro { max-width: 840px; padding: 68px 0 52px; }
.brand-intro h1 { font-size: clamp(48px, 7vw, 80px); }
.brand-intro .intro { max-width: 720px; font-size: 20px; }
.brand-format { font: 12px/1.5 var(--sl-code-font); color: var(--sl-muted); }
.brand-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.brand-card { min-width: 0; border: 1px solid var(--sl-line); border-radius: 10px; overflow: hidden; }
.brand-art { height: 290px; display: flex; align-items: center; justify-content: center; padding: 30px; }
.brand-art img { display: block; max-width: 100%; }
.brand-art-dark { background: #191b1c; }
.brand-art-light { background: #f2efe8; }
.brand-art .brand-lockup { width: 90%; height: auto; }
.brand-caption { padding: 24px 28px 28px; }
.brand-caption h2 { font-size: 23px; margin: 0 0 12px; }
.brand-caption p, .brand-details p, .brand-guidance p { font-size: 14px; color: var(--sl-muted); }
.brand-downloads { display: flex; gap: 24px; margin-top: 24px; font-size: 13px; font-weight: 650; }
.brand-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; padding: 56px 0; margin-top: 40px; border-top: 1px solid var(--sl-line); }
.brand-details h2, .brand-guidance h2 { font-size: 28px; }
.brand-icon-row { display: flex; align-items: end; gap: 22px; min-height: 104px; margin: 20px 0; }
.brand-icon-row > div { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.brand-icon-row span { color: var(--sl-muted); font: 10px/1.5 var(--sl-code-font); white-space: nowrap; }
.brand-avatar { display: flex; gap: 24px; align-items: center; margin: 32px 0; }
.brand-avatar img { display: block; border-radius: 20px; }
.brand-text-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 650; }
.brand-guidance { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; border-top: 1px solid var(--sl-line); padding: 44px 0 52px; }
.brand-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: center; }
.brand-swatches > div { display: grid; gap: 8px; min-width: 0; }
.brand-swatches span { height: 64px; border: 1px solid var(--sl-line); border-radius: 6px; }
.brand-swatches strong { font-size: 12px; font-weight: 600; }
.brand-swatches code { font: 11px/1.5 var(--sl-code-font); color: var(--sl-muted); }
@media (max-width: 760px) {
  .brand-intro { padding: 44px 0 36px; }
  .brand-intro .intro { font-size: 17px; }
  .brand-previews, .brand-details, .brand-guidance { grid-template-columns: 1fr; gap: 24px; }
  .brand-art { height: 240px; }
  .brand-caption { padding: 22px; }
  .brand-details { gap: 40px; padding: 32px 0; }
  .brand-guidance { padding: 32px 0; }
  .brand-icon-row { gap: 16px; }
}