/* Real iPhone home screen, framed to show recommendations and discovery together. */
.hero { min-height: 850px; }
.hero-inner { min-height: 810px; }
.hero-visual { height: 690px; }
.hero-phone-real {
  position: relative;
  z-index: 2;
  width: 310px;
  aspect-ratio: 874 / 1900;
  overflow: hidden;
  border: 5px solid #3e424b;
  border-radius: 41px;
  background: #090d14;
  box-shadow: 0 30px 85px #000b, 0 0 0 1px #85869377;
  transform: rotate(2deg);
  transition: transform .45s ease, box-shadow .45s ease;
}
.hero-phone-real:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 35px 100px #000d, 0 0 0 1px #85869399; }
.hero-phone-real img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-preview-label {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid #ff8ca438;
  border-radius: 100px;
  background: #171d28eb;
  color: #ffd0dc;
  font: 800 9px var(--display);
  letter-spacing: 1.2px;
  box-shadow: 0 10px 32px #0008;
}
@media (max-width: 1000px) and (min-width: 721px) {
  .hero { min-height: 760px; }
  .hero-inner { min-height: 730px; }
  .hero-visual { height: 650px; transform: none; }
  .hero-phone-real { width: 290px; }
}
@media (max-width: 720px) {
  .hero-visual { height: 650px; transform: none; margin: 16px 0 -10px; }
  .hero-phone-real { width: min(290px, calc(100vw - 68px)); transform: rotate(1deg); }
  .hero-preview-label { right: 0; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone-real { transition: none; transform: none; }
  .hero-phone-real:hover { transform: none; }
}

.community-section { background: radial-gradient(circle at 12% 20%, #61233a28, transparent 42%), #0b1018; }
.community-panel, .community-share { box-shadow: 0 22px 70px #0002; }
.community-panel { min-height: 350px; }
.community-panel::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -100px;
  width: 200px;
  height: 200px;
  border: 1px solid #ff7d9a18;
  border-radius: 50%;
  pointer-events: none;
}
.leaderboard-switch button {
  flex: 1;
  border: 0;
  border-radius: 22px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  font: 700 11px var(--display);
  transition: background .2s, color .2s, box-shadow .2s;
}
.leaderboard-switch button[aria-selected="true"] {
  background: #596171;
  color: #fff;
  box-shadow: 0 3px 12px #0003;
}
.leaderboard-switch button:hover { color: #fff; }
.leaderboard-preview[hidden] { display: none !important; }
.leader-row { min-height: 82px; }
.preview-note { margin: 20px 0 0; color: #aeb7c4; font-size: 11px; line-height: 1.55; }
.preview-playlist-art { position: relative; height: 106px; overflow: hidden; border-radius: 12px; }
.preview-playlist-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c1119b0, #0c111916); }
.preview-playlist-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.preview-playlist-art span { position: absolute; z-index: 1; left: 16px; bottom: 12px; color: #ffd755; font: 800 20px var(--display); }
.preview-playlist-info { display: grid; gap: 7px; padding-top: 13px; }
.preview-playlist-info strong { font: 800 16px var(--display); }
.preview-playlist-info small { color: var(--muted); font-size: 11px; }
.preview-playlist-info>span { color: #ff9aaf; font-size: 10px; font-weight: 700; }
.community-share .share-pill { margin-top: 28px; }

@media (max-width: 720px) {
  .community-panel { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .leaderboard-switch button { transition: none; }
}

/* Community preview: a tall, phone-sized leaderboard with real sample rows. */
.community-grid { grid-template-columns: .95fr 1.05fr; align-items: stretch; gap: 22px; }
.community-panel {
  display: grid;
  place-items: center;
  min-height: 650px;
  padding: 20px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.community-panel::before { display: none; }
.community-device {
  position: relative;
  width: min(100%, 372px);
  min-height: 616px;
  padding: 28px 22px 24px;
  overflow: hidden;
  border: 1px solid #ffffff22;
  border-radius: 38px;
  background: linear-gradient(150deg, #171d28 0%, #0c1119 62%, #111722 100%);
  box-shadow: 0 28px 75px #0009, inset 0 1px #ffffff12;
}
.community-device::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 76px;
  height: 12px;
  border-radius: 20px;
  background: #05080d;
  transform: translateX(-50%);
}
.community-panel-head { margin-top: 8px; align-items: center; }
.community-panel-head .panel-kicker { font-size: 8px; letter-spacing: 1.3px; }
.community-panel-head .circle-arrow { width: 30px; height: 30px; }
.leaderboard-switch { margin: 20px 0 8px; }
.leaderboard-switch button { padding: 10px 6px; font-size: 10px; white-space: nowrap; }
.leaderboard-preview { min-height: 390px; }
.leader-row {
  min-height: 92px;
  gap: 9px;
  padding: 12px 0;
  border-color: #ffffff14;
}
.leader-row > b { width: 18px; flex: 0 0 18px; font-size: 12px; }
.leader-avatar { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border: 1px solid #ffffff30; }
.leader-row > div { min-width: 0; }
.leader-row strong { font-size: 11px; line-height: 1.3; }
.leader-row small { font-size: 9px; white-space: nowrap; }
.leader-score { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.preview-note { margin-top: 18px; font-size: 9px; }
.playlist-leader { min-height: 96px; }
.leader-playlist-cover { width: 43px; height: 62px; flex: 0 0 43px; border: 1px solid #ffffff20; border-radius: 7px; object-fit: cover; }
.community-share {
  display: flex;
  min-height: 650px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 34px;
  isolation: isolate;
  background: #111722;
}
.community-share::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, #111722 0%, #111722f2 35%, #1117228c 67%, #1117225c 100%);
  pointer-events: none;
}
.share-copy { position: relative; z-index: 2; max-width: 410px; }
.share-copy h3 { font: 800 31px/1.16 var(--display); letter-spacing: -1.3px; margin: 26px 0 14px; }
.share-copy h3 em { color: var(--pink); font: italic 400 1.08em Georgia, serif; }
.share-copy p { max-width: 390px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.share-pill { margin-top: 22px; background: #0b1018e8; border-color: #ffffff20; backdrop-filter: blur(12px); }
.share-visual {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 69%;
  margin: 0;
  overflow: hidden;
  opacity: .96;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.share-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.share-visual figcaption { position: absolute; right: 18px; bottom: 14px; color: #dce0e8; font-size: 9px; text-shadow: 0 2px 8px #000; }
.share-orbit { display: none; }
@media (max-width: 1000px) {
  .community-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .community-panel { padding: 12px; }
  .community-device { padding-inline: 17px; }
  .community-share { padding: 28px 24px; }
}
@media (max-width: 720px) {
  .community-grid { grid-template-columns: 1fr; gap: 20px; }
  .community-panel { min-height: auto; padding: 0; }
  .community-device { width: min(100%, 372px); min-height: 616px; }
  .community-share { min-height: 560px; padding: 28px 24px; }
  .share-copy h3 { font-size: 28px; }
  .share-visual { height: 62%; }
}
@media (max-width: 370px) {
  .community-device { padding-inline: 14px; border-radius: 30px; }
  .leaderboard-switch button { font-size: 9px; }
  .leader-row { gap: 7px; }
  .leader-avatar { width: 39px; height: 39px; flex-basis: 39px; }
  .leader-row strong { font-size: 10px; }
  .leader-row small { font-size: 8px; }
  .leader-score { font-size: 9px; }
}