@charset "UTF-8";

.listening-section {
  padding-block: clamp(72px, 8vw, 112px);
  border-bottom: 1px solid var(--cb-line);
  background: var(--cb-ivory);
}

.listening-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(64px, 9vw, 112px);
  align-items: center;
}

.listening-intro {
  position: relative;
  padding-left: 30px;
}

.listening-intro::before {
  position: absolute;
  inset: 4px auto 4px 0;
  width: 3px;
  background: var(--cb-koi);
  content: "";
}

.listening-wave {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: 9px 0 25px;
  overflow: visible;
}

.listening-wave path {
  fill: none;
  stroke: var(--cb-koi-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.listening-intro .section-heading {
  max-width: 620px;
  font-size: clamp(36px, 4.25vw, 55px);
}

.listening-copy {
  margin: 23px 0 0;
  color: var(--cb-muted);
  font-size: 18px;
}

.listening-platforms {
  border-top: 1px solid var(--cb-line);
}

.listening-platform {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 78px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--cb-line);
  color: var(--cb-navy);
  text-decoration: none;
  transition: color 160ms ease, padding 160ms ease;
}

.platform-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(38, 39, 86, 0.22);
  border-radius: 50%;
  color: var(--cb-koi-dark);
  background: var(--cb-paper);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.platform-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.listening-platform:first-child .platform-icon svg circle:first-child,
.listening-platform:nth-child(2) .platform-icon svg circle {
  fill: none;
}

.listening-platform:first-child .platform-icon svg path {
  fill: currentColor;
  stroke: none;
}

.platform-name {
  font-family: var(--cb-serif);
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.platform-arrow {
  padding-right: 8px;
  color: var(--cb-koi-dark);
  font-size: 23px;
  line-height: 1;
  transition: transform 160ms ease;
}

.listening-platform:hover,
.listening-platform:focus-visible {
  padding-left: 10px;
  color: var(--cb-koi-dark);
}

.listening-platform:hover .platform-icon,
.listening-platform:focus-visible .platform-icon {
  border-color: var(--cb-navy);
  color: var(--cb-paper);
  background: var(--cb-navy);
}

.listening-platform:hover .platform-arrow,
.listening-platform:focus-visible .platform-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 860px) {
  .listening-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .listening-intro .section-heading {
    max-width: 720px;
  }
}

@media (max-width: 580px) {
  .listening-section {
    padding-block: 64px;
  }

  .listening-intro {
    padding-left: 21px;
  }

  .listening-wave {
    width: 190px;
  }

  .listening-layout {
    gap: 38px;
  }

  .listening-platform {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 13px;
    min-height: 72px;
  }

  .platform-icon {
    width: 40px;
    height: 40px;
  }

  .platform-name {
    font-size: 21px;
  }
}