:root{
  --violet:#ff6b6b;
  --pink:#ff8a42;
  --amber:#ffb35c;
  --release-accent:#ff9b54;
  --release-accent-alt:#ff766b;
  --release-accent-soft:#ffd0ad;
}

:root[data-theme="light"]{
  --release-accent:#c94f12;
  --release-accent-alt:#c63d38;
  --release-accent-soft:#8f3d18;
}

.feature-listen{
  width:min(760px, calc(100% - 2rem));
  margin:3rem auto 0;
  padding:0;
}

.feature-card{
  display:grid;
  justify-items:center;
  gap:1rem;
  padding:1.15rem;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow:0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.feature-card h2{
  margin:0;
  color:var(--release-accent-alt);
  font-size:clamp(1.35rem, 4vw, 2.2rem);
  line-height:1.05;
}

.feature-card iframe{
  display:block;
  width:min(100%, 300px);
  height:600px;
  border:0;
  border-radius:22px;
  background:var(--surface);
}

.feature-link{
  margin:0;
  color:var(--release-accent-soft);
  font-family:'DM Sans', sans-serif;
  font-size:.85rem;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
}

.feature-link:hover{
  color:var(--release-accent);
}

@media (max-width:640px){
  .feature-listen{
    width:calc(100% - 2rem);
    margin-top:2rem;
  }

  .feature-card{
    padding:.85rem;
    border-radius:20px;
  }
}