.brand-alpha-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8);
}
.brand-alpha-nav__letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--color-mist); color: var(--color-ink);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.brand-alpha-nav__letter:hover { background: var(--color-forest); color: white; }

.brand-group { margin-bottom: var(--space-8); }
.brand-group__letter {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  color: var(--color-forest); text-transform: uppercase;
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-forest);
  margin: 0 0 var(--space-3);
}

.brand-list { display: flex; flex-direction: column; gap: 2px; }
.brand-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-fog);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.brand-row:hover { border-color: var(--color-forest); background: oklch(98% .01 145); }
.brand-row__name { font-weight: 700; color: var(--color-ink); text-decoration: none; }
.brand-row__name:hover { color: var(--color-forest); }
.brand-row__country { font-size: var(--text-sm); color: var(--color-muted); }
.brand-row__web {
  font-size: var(--text-sm); color: var(--color-slate); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-row__web:hover { color: var(--color-forest); text-decoration: underline; }
.brand-row__btn {
  font-size: var(--text-xs); font-weight: 700; color: var(--color-forest);
  text-decoration: none; white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--color-forest); border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.brand-row__btn:hover { background: var(--color-forest); color: white; }

@media (max-width: 640px) {
  .brand-row { grid-template-columns: 1fr auto; }
  .brand-row__country, .brand-row__web { display: none; }
}