.stream-key-hero {
  position: relative;
  overflow: hidden;
}

.stream-key-hero::after {
  content: "";
  position: absolute;
  inset: auto -8rem -12rem auto;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgb(255 212 59 / 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgb(255 212 59 / 0.035),
    0 0 0 7rem rgb(255 212 59 / 0.025);
  pointer-events: none;
}

.route-board {
  border-top: 3px solid var(--wg-yellow, #ffd43b);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
}

.filter-chip {
  border: 1px solid var(--wg-edge, #353a44);
  background: var(--wg-surface, #14161a);
  color: var(--wg-copy, #d7d9de);
}

.filter-chip:hover {
  border-color: var(--wg-edge-strong, #626975);
  color: var(--wg-paper, #f7f7f4);
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--wg-yellow, #ffd43b);
  background: var(--wg-yellow, #ffd43b);
  color: var(--wg-ink, #101114);
}

.agency-card {
  position: relative;
  min-width: 0;
  align-self: start;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.05);
  padding: 1.5rem;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}

.agency-card:hover {
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.07);
}

.agency-card__number {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--wg-edge, #353a44);
  border-radius: 0.75rem;
  color: var(--wg-muted, #a9afb9);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.agency-card__region {
  color: var(--wg-muted, #a9afb9);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agency-card__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--wg-edge, #353a44);
  border-radius: 999px;
  background: var(--wg-surface, #14161a);
  padding: 0.32rem 0.58rem;
  color: var(--wg-copy, #d7d9de);
  font-size: 0.72rem;
  font-weight: 700;
}

.agency-card[hidden] {
  display: none;
}

@media (max-width: 639.98px) {
  .stream-key-hero::after {
    right: -16rem;
    bottom: -15rem;
  }

  .agency-card {
    padding: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agency-card,
  .filter-chip {
    transition: none !important;
  }
}

/* Codex-4 directory typography. */
html body.c4-page main :is(.agency-card__number, .agency-card__region, .agency-card__tag) { font-size: 14px; }