/* /logo/ brand assets page */
.logo-page{background:#fff;padding:52px 0 72px;}
.logo-page .container{max-width:980px;}

.logo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:60px;
}
@media (min-width:640px){.logo-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.logo-grid{grid-template-columns:1fr 1fr 1fr;}}

.logo-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.logo-card__preview{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  padding:28px 22px;
}
.logo-card__preview--light{background:var(--bg-page);}
.logo-card__preview--dark{background:var(--navy);}
.logo-card__preview img{max-width:100%;max-height:110px;width:auto;height:auto;display:block;}
.logo-card__preview--square img{max-height:92px;}
.logo-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px 20px;
  border-top:1px solid var(--border);
}
.logo-card h3{font-size:1.02rem;margin:0 0 6px;}
.logo-card p{color:var(--text-muted);font-size:.87rem;line-height:1.55;margin:0 0 16px;flex:1;}
.logo-card__actions{display:flex;flex-wrap:wrap;gap:8px;}
.logo-card__actions .btn{padding:7px 14px;font-size:.82rem;min-width:0;}

.logo-colors{margin-bottom:56px;}
.logo-colors h2,
.logo-note h2{font-size:1.3rem;margin:0 0 16px;}

.color-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:480px;
}
@media (min-width:520px){.color-grid{grid-template-columns:1fr 1fr;}}
.color-swatch{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
}
.color-swatch__chip{
  width:36px;height:36px;
  border-radius:8px;
  flex-shrink:0;
  border:1px solid rgba(15,23,42,.08);
}
.color-swatch__meta{flex:1;min-width:0;}
.color-swatch__meta strong{display:block;font-size:.92rem;}
.color-swatch__meta code{font-size:.82rem;color:var(--text-muted);}
.color-swatch .btn{padding:6px 12px;font-size:.78rem;flex-shrink:0;}

.logo-note ul{list-style:disc;padding-left:20px;margin:0 0 1em;}
.logo-note li{color:var(--text-muted);font-size:.95rem;margin-bottom:.5em;}
.logo-note p{color:var(--text-muted);font-size:.95rem;margin:0;}

.btn.is-flashed{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}