/* Brandbook page */
.bb-hero{background:var(--bg-page);display:flex;flex-direction:column;align-items:center;gap:20px;padding:80px var(--gutter);text-align:center}
.bb-chip{display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--accent-bg-mist);color:var(--text-accent);font-weight:500;font-size:12px;line-height:16px}
.bb-hero h1{font-weight:600;font-size:52px;line-height:60px}
.bb-hero p{font-size:18px;line-height:28px;color:var(--text-secondary);max-width:780px}
.bb-body{padding:80px var(--gutter)}
.bb-layout{display:flex;gap:48px;align-items:flex-start}
.bb-side{display:flex;flex-direction:column;gap:20px;width:400px;flex:none;align-items:stretch}
.bb-label{font-weight:500;font-size:12px;line-height:16px;letter-spacing:.72px;text-transform:uppercase;color:#5b7584}
.bb-card{background:var(--surface);border:1px solid var(--line-site);border-radius:20px;padding:20px}
.bb-card.color{display:flex;align-items:center;gap:20px}
.swatch{width:80px;height:80px;border-radius:16px;flex:none}
.codes{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px;color:var(--text-secondary)}
.codes strong{font-weight:600;color:var(--text-primary)}
.bb-card.font{display:flex;flex-direction:column;gap:6px}
.font-label{font-weight:500;font-size:14px;line-height:20px;color:#5b7584}
.font-name{font-weight:600;font-size:28px;line-height:36px}
.bb-download{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:12px;background:var(--accent);color:#fff;font:450 14px/20px var(--font)}
.bb-download:hover{filter:brightness(.94)}
.bb-logos{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.logo-row{display:flex;gap:16px}
.logo-card{flex:1;min-width:0;height:188px;border-radius:20px;display:flex;align-items:center;justify-content:center}
.logo-card.light{background:var(--bg-page)}
.logo-card.dark{background:var(--panel-inverse)}
.logo-card img{object-fit:contain;max-width:none}
.logo-h img{width:231px;height:46px}
.logo-v img{width:174px;height:120px}
.logo-mark img{width:116px;height:126px}
@media (max-width:1100px){
  .bb-layout{flex-direction:column;gap:32px}
  .bb-side{width:100%}
  .bb-logos{width:100%}
}
@media (max-width:900px){
  .bb-hero{gap:16px;padding:40px 16px}
  .bb-hero h1{font-size:34px;line-height:42px}
  .bb-hero p{font-size:16px;line-height:26px}
  .bb-body{padding:40px 16px}
  .bb-download{align-self:stretch}
  .bb-logos{gap:12px}
  .logo-row{gap:12px}
  .logo-card{height:132px}
  .logo-card img{max-width:90%}
  .logo-h img{width:130px;height:26px}
  .logo-v img{width:124px;height:86px}
  .logo-mark img{width:83px;height:90px}
}