.service-brands .sec-head.is-stacked p {
  max-width: var(--reading-max);
  margin-top: var(--space-3);
  font-size: var(--t-body);
  line-height: var(--leading-normal);
}

.service-brands-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  grid-auto-rows: minmax(var(--hit-min), auto);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-brands-list > li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  border: var(--ds-card-border);
  border-radius: var(--radius-md);
  background: var(--ds-card-bg);
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-regular);
  line-height: var(--leading-snug);
  text-align: left;
  overflow-wrap: anywhere;
}

.service-brands-list > li:has(.service-brand-pick) {
  padding: 0;
  overflow: hidden;
}

.service-brand-pick {
  width: 100%;
  align-self: stretch;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.service-brand-pick:hover { background: var(--accent-soft); color: var(--accent); }
.service-brand-pick:active { background: var(--accent-a16); }
.service-brand-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }

.service-quiz-brand {
  margin-bottom: var(--quiz-group-gap);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: var(--t-body);
}
.service-quiz-brand > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--field-min);
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
}
.service-quiz-brand > summary::-webkit-details-marker { display: none; }
.service-quiz-brand > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.service-quiz-brand b { font-weight: var(--w-section); }
.service-quiz-brand-change { color: var(--accent); flex-shrink: 0; font-size: var(--t-meta); }
.service-quiz-brand-choices { padding: 0 var(--space-4) var(--space-4); }
.service-quiz-brand-choices .q-spec-group { margin: 0; }

.service-brands-more {
  margin-top: var(--space-4);
}

.service-brands-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit-min);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  color: var(--accent);
  font-size: var(--t-body);
  line-height: var(--leading-normal);
  font-weight: var(--w-action);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-xs);
}

.service-brands-more > summary::-webkit-details-marker {
  display: none;
}

.service-brands-more > summary:hover {
  background: var(--accent-soft);
}

.service-brands-more > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
}

.service-brands-more .service-brands-collapse,
.service-brands-more[open] .service-brands-expand {
  display: none;
}

.service-brands-more[open] .service-brands-collapse {
  display: inline;
}

.service-brands-more[open] > summary .i {
  transform: rotate(180deg);
}

.service-brands-more[open] > .service-brands-list {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .service-brands-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}