.eljame-platform-panel {
  align-items: center;
  background: linear-gradient(135deg, #fffdf7, #f7f1e5);
  border: 1px solid rgba(24, 53, 46, .14);
  border-radius: 1.25rem;
  box-shadow: 0 14px 34px rgba(24, 53, 46, .08);
  color: #18352e;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-block: 1.5rem 2rem;
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  position: relative;
}
.eljame-platform-panel::before {
  background: linear-gradient(90deg, #1ed760, #f43e37);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}
.eljame-platform-panel__mark {
  align-items: center;
  background: #18352e;
  border-radius: 1rem;
  color: #efd18a;
  display: flex;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  height: 3.25rem;
  justify-content: center;
  width: 3.25rem;
}
.eljame-platform-panel__mark svg { height: 1.5rem; width: 1.5rem; }
.eljame-platform-panel__copy { min-width: 0; }
.eljame-platform-panel__eyebrow { color: #8b651e; font-size: .78rem; font-weight: 800; letter-spacing: .02em; margin: 0 0 .2rem; }
.eljame-platform-panel__copy h2 { color: #18352e; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; margin: 0; }
.eljame-platform-panel__copy > p:last-child { color: #5f6e69; font-size: .9rem; line-height: 1.6; margin: .25rem 0 0; }
.eljame-platform-panel__actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }
.eljame-platform-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: .8rem;
  display: inline-flex;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 750;
  gap: .45rem;
  justify-content: center;
  min-height: 44px;
  padding: .7rem .9rem;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.eljame-platform-button svg { height: 1.05rem; width: 1.05rem; }
.eljame-platform-button--apple { background: #8a3ffc; border-color: #7130d4; color: #fff; }
.eljame-platform-button--spotify { background: #1ed760; border-color: #18b952; color: #102c1a; }
/* Pocket Casts brand red is #f43e37, which carries white at only 3.76:1 - under
   the 4.5:1 this 14.4px label needs. Darkened along the same hue to #cf130c
   (5.6:1); the border follows. Apple (#8a3ffc, 5:1) and Spotify (dark ink on
   #1ed760, 7.83:1) already pass and keep their exact brand values. */
.eljame-platform-button--pocket { background: #cf130c; border-color: #a80f0a; color: #fff; }
.eljame-platform-button:hover { box-shadow: 0 8px 18px rgba(24, 53, 46, .16); transform: translateY(-1px); }
.eljame-platform-button:focus-visible { outline: 3px solid #b47c18; outline-offset: 3px; }
.eljame-platform-panel__related {
  align-items: center;
  border-top: 1px solid rgba(24, 53, 46, .12);
  color: #5f6e69;
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .45rem .8rem;
  grid-column: 1 / -1;
  padding-top: .8rem;
}
.eljame-platform-panel__related span { font-weight: 700; }
.eljame-platform-panel__related a { color: #815f1e; font-family: system-ui, sans-serif; font-weight: 750; text-underline-offset: .18em; }
.eljame-platform-panel__related a:focus-visible { outline: 3px solid #b47c18; outline-offset: 2px; }

@media (max-width: 760px) {
  .eljame-platform-panel { grid-template-columns: auto minmax(0, 1fr); }
  .eljame-platform-panel__actions { grid-column: 1 / -1; justify-content: stretch; }
  .eljame-platform-button { flex: 1 1 9rem; }
}

@media (max-width: 460px) {
  .eljame-platform-button { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .eljame-platform-button { transition-duration: .001ms; }
}