:root {
  --friend-a: #7dce9a;
  --friend-a-soft: rgba(125, 206, 154, 0.14);
  --friend-b: #e8a87c;
  --friend-b-soft: rgba(232, 168, 124, 0.14);
}

.page-intro-copy .intro-note {
  border-left-color: var(--accent);
  background: rgba(212, 160, 23, 0.1);
}

.page-intro-copy .intro-example {
  margin: 0 auto;
}

.seo-split-copy a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.seo-split-copy a:hover {
  color: var(--ink);
}

.sources-compact {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

.benchmarks-head p {
  display: none;
}

.partner-hint {
  display: none;
}

.controls {
  grid-template-columns: 1fr auto auto;
}

.friends-row .partner-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.size-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.friends-row .partner-card > label {
  margin-top: 0.15rem;
}

.partner-card.friend-a {
  border-color: color-mix(in srgb, var(--friend-a) 35%, var(--line));
  background: linear-gradient(180deg, var(--friend-a-soft), transparent 45%),
    var(--bg-1);
}

.partner-card.friend-b {
  border-color: color-mix(in srgb, var(--friend-b) 35%, var(--line));
  background: linear-gradient(180deg, var(--friend-b-soft), transparent 45%),
    var(--bg-1);
}

.friend-a .partner-side {
  color: var(--friend-a);
}

.friend-b .partner-side {
  color: var(--friend-b);
}

.column.friend-a {
  border-color: color-mix(in srgb, var(--friend-a) 35%, var(--line));
  background: linear-gradient(180deg, var(--friend-a-soft), transparent 40%),
    var(--bg-1);
}

.column.friend-b {
  border-color: color-mix(in srgb, var(--friend-b) 35%, var(--line));
  background: linear-gradient(180deg, var(--friend-b-soft), transparent 40%),
    var(--bg-1);
}

.friend-a .column-badge,
.friend-a .metric-value {
  color: var(--friend-a);
}

.friend-b .column-badge,
.friend-b .metric-value {
  color: var(--friend-b);
}

.friend-a .bar-fill {
  background: var(--friend-a);
}

.friend-b .bar-fill {
  background: var(--friend-b);
}

.class-label {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .controls {
    grid-template-columns: 1fr;
  }
}