:root {
  --jsfm-blue: #1f7aec;
  --jsfm-cyan: #28d7f2;
  --jsfm-navy: #070b1b;
  --jsfm-white: #fff;
}

.jsfm-conversion {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem 1.75rem;
  align-items: center;
  padding: clamp(.9rem, 2vw, 1.5rem) max(1rem, calc((100vw - 1180px) / 2));
  color: var(--jsfm-white);
  background: radial-gradient(circle at 78% -40%, rgba(40, 215, 242, .24) 0, transparent 42%), linear-gradient(115deg, #050814, #111a3d);
  border-bottom: 1px solid rgba(40, 215, 242, .22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

.jsfm-conversion__headline {
  width: fit-content;
  margin: .08rem 0 .35rem;
  color: var(--jsfm-white);
  background: linear-gradient(100deg, var(--jsfm-white) 15%, var(--jsfm-cyan) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.65rem, 3.2vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}
.jsfm-landing h1 { margin: .15rem 0 .5rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
.jsfm-conversion p { max-width: 680px; margin: .25rem 0; color: #dce7ff; }
.jsfm-eyebrow { color: var(--jsfm-cyan); font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
.jsfm-conversion .jsfm-eyebrow { font-size: .68rem; letter-spacing: .22em; }
.jsfm-conversion__actions { text-align: center; }
.jsfm-now-playing { grid-column: 1 / -1; color: #bcd7ff; font-size: .9rem; }
.jsfm-recent { grid-column: 1 / -1; color: #dce7ff; font-size: .9rem; }
.jsfm-recent summary { width: max-content; cursor: pointer; }
.jsfm-recent ol { columns: 2; padding-left: 1.25rem; }
.jsfm-app-links { display: flex; gap: 1rem; justify-content: center; margin-top: .75rem; }
.jsfm-app-links a { color: var(--jsfm-white); }

.jsfm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.35rem;
  border: 1px solid var(--jsfm-blue);
  border-radius: 999px;
  color: var(--jsfm-white);
  background: var(--jsfm-blue);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.jsfm-button--primary { min-width: 180px; box-shadow: 0 8px 30px rgba(31, 122, 236, .35); }
.jsfm-button:focus-visible, .jsfm-player a:focus-visible { outline: 3px solid var(--jsfm-cyan); outline-offset: 3px; }

.jsfm-player {
  position: fixed;
  z-index: 99999;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  max-width: 720px;
  margin: auto;
  padding: .75rem 1rem;
  color: var(--jsfm-white);
  background: rgba(7, 11, 27, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .45);
}
.jsfm-player__play { width: 52px; height: 52px; border: 0; border-radius: 50%; color: white; background: var(--jsfm-blue); font-weight: 800; cursor: pointer; }
.jsfm-player__track { min-width: 0; }
.jsfm-player__track strong, .jsfm-player__track span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsfm-player__track span { color: #b8c4df; font-size: .85rem; }
.jsfm-player__request { color: var(--jsfm-cyan); }

.jsfm-landing { max-width: 960px; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) 1rem 8rem; }
.jsfm-landing__lead { max-width: 720px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.jsfm-landing section { margin-top: 3rem; }
.jsfm-card { padding: 1.5rem; border: 1px solid rgba(127, 127, 127, .3); border-radius: 16px; }
.jsfm-form { display: grid; gap: 1rem; }
.jsfm-form label { display: grid; gap: .35rem; }
.jsfm-form input { min-height: 48px; padding: .6rem .8rem; border: 1px solid #8b94a7; border-radius: 8px; font: inherit; }
.jsfm-track-list { display: grid; gap: .5rem; padding-left: 1.25rem; }
.jsfm-article-cta { margin: 3rem 0 1rem; padding: clamp(1.25rem, 3vw, 2rem); color: var(--jsfm-white); background: linear-gradient(135deg, var(--jsfm-navy), #142b5f); border-radius: 16px; }
.jsfm-article-cta h2 { margin: .25rem 0; color: var(--jsfm-white); }
.jsfm-article-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: center; }
.jsfm-article-cta__actions > a:not(.jsfm-button) { color: var(--jsfm-cyan); }

@media (max-width: 700px) {
  .jsfm-conversion { grid-template-columns: 1fr; text-align: center; }
  .jsfm-conversion__headline { width: auto; }
  .jsfm-now-playing { grid-column: auto; }
  .jsfm-recent { grid-column: auto; }
  .jsfm-recent ol { columns: 1; }
  .jsfm-player { right: .5rem; bottom: .5rem; left: .5rem; grid-template-columns: auto minmax(0, 1fr); }
  .jsfm-player__request { display: none; }
  body { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}