/* ============ Musin — Content Creators landing ============ */

:root {
  --bg: #0a0a0a;
  --bg-card: #1a1a1a;
  --bg-card-2: #1c1c1c;
  --bg-elevated: #262626;
  --border: #2e2e2e;
  --text-primary: #fafafa;
  --text-secondary: #d4d4d4;
  --text-tertiary: #a3a3a3;
  --text-dim: rgba(255, 255, 255, 0.55);
  --brand: #e54552;
  --green: #3ddc97;
  --blue: #3d5ddc;
  --orange: #ffac12;
  --radius-card: 40px;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-logo: "Inter Tight", "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============ Buttons ============ */
/* Line breaks that only apply on phone screens (switched on in the 600 block) */
.br-phone { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #d63c49; transform: translateY(-1px); }
.btn--secondary { background: var(--bg-elevated); color: var(--text-primary); }
.btn--secondary:hover { background: #333; }
/* White button with black text (corrections #1) */
.btn--light { background: #fff; color: #0a0a0a; padding: 8px 14px; font-size: 14px; line-height: 20px; }
.btn--light:hover { background: #e5e5e5; transform: translateY(-1px); }
.btn--sm { padding: 10px 16px; font-size: 14px; line-height: 20px; }
/* Hero CTA: a fuller capsule that hugs its label (#2) */
.btn--md { padding: 15px 26px; font-size: 15px; line-height: 22px; }
.btn--lg { padding: 14px 22px; font-size: 16px; line-height: 24px; }
.btn__icon { width: 18px; height: 18px; opacity: 0.6; }

/* ============ Header / nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.nav-logo__mark { width: 28px; height: 28px; }

.nav-logo__type {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-primary);
}

/* Page buttons grouped on the right, next to the Log in button */
.nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-link {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #8a8a8a;
  text-decoration: none;
  padding: 8px 4px;
  border-radius: 10px;
  transition: color 0.2s ease;
}

.nav-link:hover { color: var(--text-secondary); }
.nav-link.is-active { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 16px; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.97);
}

/* Small screens: list sits on the right, under the Log in button */
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 16px 32px 24px;
  gap: 4px;
}

.mobile-menu .nav-link { font-size: 20px; padding: 12px 0; }

/* ============ Hero ============ */
.hero { padding-top: 48px; padding-bottom: 48px; overflow: hidden; }

.hero__inner { display: flex; justify-content: center; }

/* Two-column row: example screen (left) + badge/title/text/CTA (right) */
.hero__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 104px;
  width: 100%;
}

/* Title, supporting text and CTA, with plenty of air between them (#4) */
.hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 38px;
  max-width: 640px;
}

/* Title on the right of the example screen (#1) */
.hero__title {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -1px;
  text-align: left;
}

/* Grey supporting text, like before (#1). The big title's glyphs carry more
   left side bearing than the subtitle's, so the smaller text reads as hanging
   past it — nudged forward by one space to line the two up (#1) */
.hero__subtitle {
  padding-left: 6px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: var(--text-tertiary);
  max-width: 480px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero__cta-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

/* Example screen — smaller so it sits nicely in the frame (#4) */
.hero-mockup {
  position: relative;
  flex: 0 0 auto;
  width: 296px;
  height: 584px;
}

.main-phone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.74);
  transform-origin: top center;
  width: 400px;
  height: 789px;
  z-index: 2;
}

.main-phone__screen {
  position: absolute;
  top: 29px;
  left: 31px;
  width: 338px;
  height: 731px;
  border-radius: 40px;
  overflow: hidden;
  background: #111;
}

.phone-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.phone-slide.is-current { visibility: visible; }

/* Video placeholder (corrections #5) — purple-lined frame; drop a real video in later */
.phone-slide--video {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 28px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 3px #8b5cf6;
}

.phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-slide__badge {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(139, 92, 246, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.main-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Floating notification badges */
.notif {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(26, 26, 28, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  white-space: nowrap;
}

.notif--money { top: -32px; left: 50%; transform: translateX(-50%); }
.notif--views { top: 160px; left: -75px; }
.notif--track { top: 340px; right: -66px; }

.notif__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.notif__icon--green { background: var(--green); }
.notif__icon--blue { background: var(--blue); }
.notif__icon img { width: 24px; height: 24px; }

.notif__cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  /* neutral dark fallback so there's no coloured box before the cover loads (#1) */
  background-color: var(--bg-card-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.notif__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.notif__sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}

/* ============ Section titles ============ */
.section-title {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: -0.96px;
  text-align: center;
}

.section-title--left { text-align: left; }

/* ============ Choose music you like — merged head (#2) ============ */
.genres__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* space between the number/label and the heading, like the gaps between
     sections (#2) */
  gap: clamp(72px, 9vw, 128px);
  margin-bottom: 44px;
  text-align: center;
}

/* Big number with 'tracks available now' sized to sit right under it (#1) */
.genres__stat { display: flex; flex-direction: column; align-items: center; }

/* The number is sized in JS so its width matches the line below it — the 88px
   here is just a sensible pre-script default. */
.genres__number {
  font-size: 88px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -3px;
  color: var(--text-primary);
}

/* Small line under the number — same size as the card titles; the number is
   scaled to share its exact width (#3) */
.genres__unit {
  margin-top: 14px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

/* Auto-running line of random tracks (below the genre tags) */
.track-marquee {
  margin-top: 64px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.track-marquee__inner {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}

/* Box-shaped track cards: cover on top, title + artist lower in the box */
.track-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  min-width: 0;
  padding: 16px 16px 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card-2);
  text-align: center;
  flex: 0 0 auto;
  width: 196px;
}

.track-chip__cover {
  width: 164px;
  height: 164px;
  border-radius: 16px;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

/* Names come from a rotating catalogue, so long ones clip inside the card
   rather than pushing out of it. */
.track-chip > div { min-width: 0; max-width: 100%; }

.track-chip__title,
.track-chip__artist {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-chip__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.track-chip__artist {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* ============ Genres (PDF mod #4) ============ */
.genres { padding: 64px 0 72px; overflow: hidden; }

.genre-lines {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.genre-line {
  display: flex;
  justify-content: center;
  gap: 20px 36px;
  flex-wrap: nowrap;
  width: max-content;
  margin: 0 auto;
  will-change: transform;
}

.genre-tag {
  flex: 0 0 auto;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.5px;
  cursor: default;
  transition: opacity 0.2s ease;
  opacity: 0.92;
}

.genre-tag:hover { opacity: 1; }

.genre-tag .hash { opacity: 0.45; margin-right: 1px; }

/* ============ Create content with music ============ */
.create { padding: 104px 0 128px; }

.create__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}

/* Endless 3D coverflow wheel: cards are absolutely positioned and placed by
   JS (renderWheel). The centred card faces us; side cards face outward and
   the rest stay hidden in the shade (#4-7) */
/* isolate so the cards' internal z-indexes can't render over the sticky
   header/logo when the section scrolls under it (#3, #4) */
.create__viewport { position: relative; isolation: isolate; }

.create__scroller {
  position: relative;
  height: calc(clamp(190px, 56vw, 260px) * 16 / 9 + 52px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.create__scroller.is-dragging { cursor: grabbing; }
.create__scroller.no-anim .video-card { transition: none; }

.video-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px, 56vw, 260px);
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-card);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease, opacity 0.55s ease;
  backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  will-change: transform, filter, opacity;
}

/* Shades on both edges — side videos come in from the dark and anything
   beyond the three visible cards stays hidden */
.create__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(120px, 28%, 440px);
  pointer-events: none;
  z-index: 50;
}

.create__shade--left { left: 0; background: linear-gradient(to right, var(--bg), var(--bg) 30%, transparent); }
.create__shade--right { right: 0; background: linear-gradient(to left, var(--bg), var(--bg) 30%, transparent); }

/* Arrows on each side switch the video (#8) */
/* Arrows sit just outside the centred screen, not at the page edges (#3);
   above the cards so the side screens don't cover them */
.create__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(26, 26, 28, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.create__arrow:hover { background: rgba(40, 40, 44, 0.85); }
.create__arrow:active { transform: translate(-50%, -50%) scale(0.94); }
.create__arrow img { width: 22px; height: 22px; opacity: 0.9; }
/* Just outside the side screens — close, but not covering them (#2) */
.create__arrow--left { margin-left: calc(-1 * clamp(238px, 30vw, 360px)); }
.create__arrow--right { margin-left: clamp(238px, 30vw, 360px); }

.video-card img,
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play / pause button on each carousel clip (#6) */
.video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.video-card__play::before {
  content: "";
  /* play triangle */
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.video-card__play:hover { background: rgba(0, 0, 0, 0.6); }
.video-card__play:active { transform: translate(-50%, -50%) scale(0.94); }
/* When playing: swap to pause bars and fade the button unless hovered */
.video-card.is-playing .video-card__play { opacity: 0; }
.video-card.is-playing:hover .video-card__play { opacity: 1; }
.video-card.is-playing .video-card__play::before {
  width: 16px;
  height: 18px;
  margin-left: 0;
  border: none;
  background: linear-gradient(to right, #fff 0 5px, transparent 5px 11px, #fff 11px 16px);
}

/* ============ Get paid for posting — stacking cards (PDF mod #6) ============ */
.payments { padding: 0 0 128px; }

.pay-stack {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Plain grey cards: a big grey symbol on the left, text on the right. They all
   stick at the same offset so each card fully covers the ones behind (#5, #6) */
.pay-card {
  position: sticky;
  top: 120px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 224px;
  padding: 32px 48px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg-card-2);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

/* Big grey symbol on the left */
.pay-card__icon {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* white symbols (project text colour) */
  color: var(--text-primary);
}

/* The glyph is drawn as a mask filled with the icon colour; sized to fill most
   of the left side of the card */
.pay-card__icon::before {
  content: "";
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Each card's glyph (paths relative to this file) */
.pay-card:nth-child(1) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-dollar.svg"); mask-image: url("../img/icons/pay-dollar.svg"); }
.pay-card:nth-child(2) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-share.svg"); mask-image: url("../img/icons/pay-share.svg"); }
.pay-card:nth-child(3) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-check.svg"); mask-image: url("../img/icons/pay-check.svg"); }
.pay-card:nth-child(4) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-wallet.svg"); mask-image: url("../img/icons/pay-wallet.svg"); }

.pay-card__body {
  flex: 1;
  text-align: left;
}

.pay-card__title {
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  color: var(--text-primary);
}

.pay-card__text {
  max-width: 380px;
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--text-tertiary);
}

/* ============ Logos marquee (PDF mod #7) ============ */
.logos {
  padding: 64px 0;
  overflow: hidden;
  /* the strip is several screens wide; keeping its painting to itself stops
     the phone repainting it on every scroll frame */
  contain: paint;
  transform: translateZ(0);
}

.logos__marquee {
  display: flex;
  width: max-content;
  /* No will-change: a permanent layer this wide is what tears while the page
     scrolls on phones. The animation's own 3D transform promotes it for the
     duration and lets the browser drop it afterwards. */
  backface-visibility: hidden;
  transform: translateZ(0);
}

.logos__group {
  display: flex;
  align-items: center;
  gap: 120px;
  padding-right: 120px;
  opacity: 0.4;
}

.logos__item { height: 34px; width: auto; flex: 0 0 auto; }
.logos__item--stripe { height: 30px; }
.logos__item--wide { height: 28px; }

/* ============ Inside Musin app (correction #13.1) ============
   Same sticky-stacking behaviour as the pay cards, but laid out horizontally:
   a coloured panel down the left side and an app UI screen on the right. */
.app { padding: 80px 0 128px; }

.app-stack {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Centred text on the left, a smaller framed screen on the right. Uniform
   height + same offset so cards fully cover each other when stacked (#5, #8) */
.app-card {
  position: sticky;
  top: 120px;
  display: flex;
  height: 400px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg-card-2);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

/* Left column: title + subtitle centred vertically (#4) */
.app-card__panel {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

/* Same size + colour as the "Get paid for posting" cards (#4) */
.app-card__title {
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-card__text {
  margin-top: 8px;
  max-width: 340px;
  font-size: 20px;
  line-height: 30px;
  color: var(--text-tertiary);
}

/* Smaller framed screen on the right, as before (#5) */
.app-card__screen {
  flex: 1 1 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.app-card__screen picture { display: contents; }

/* The SVG screens carry their own rounded dark panel, so no extra frame */
.app-card__screen img {
  max-width: 100%;
  max-height: 340px;
}

/* ============ FAQ ============ */
.faq { padding: 128px 0; }

.faq__container { max-width: 832px; }

.faq-list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border-radius: 16px;
  padding: 20px 24px;
  transition: background 0.25s ease;
}

.faq-item[open] { background: var(--bg-card-2); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--text-dim);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::before { content: "−"; }

.faq-item p {
  /* answer sits a couple of spaces forward of the question when open (#5) */
  margin: 8px 0 4px 52px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}

/* The payment answers run to several paragraphs, so give the breaks between
   them more room than the single-paragraph answers need above the summary. */
.faq-item p + p,
.faq-item ul + p { margin-top: 14px; }

.faq-item ul {
  margin: 10px 0 4px 52px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}

.faq-item li { margin-bottom: 4px; }
.faq-item li::marker { color: var(--text-dim); }

/* ============ CTA ============ */
/* A full-bleed tinted band rather than a card: it runs to the edges of the
   screen and dissolves into the page above and below, the way the hero does. */
.cta {
  position: relative;
  padding: 128px 0 136px;
  text-align: center;
}

/* Registered so the glow colour can be animated; the plain background below
   is what shows where @property isn't supported */
@property --cta-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(229, 69, 82, 0.3);
}

@property --cta-glow-fade {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(229, 69, 82, 0);
}

/* The band itself. On a pseudo-element so the mask fades the colour without
   touching the copy sitting on top of it. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 150% at 50% 0%, var(--cta-glow) 0%, var(--cta-glow-fade) 58%),
    var(--bg-card-2);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 26%, #000 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 26%, #000 74%, rgba(0, 0, 0, 0) 100%);
}

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Held on the first keyframe — our brand red — until the section is scrolled
   into view, where the script sets it running */
[data-cta-glow] {
  animation: cta-glow 12s ease-in-out infinite;
  animation-play-state: paused;
}

[data-cta-glow].is-live { animation-play-state: running; }

@keyframes cta-glow {
  0%, 100% { --cta-glow: rgba(229, 69, 82, 0.30); --cta-glow-fade: rgba(229, 69, 82, 0); }
  33%      { --cta-glow: rgba(167, 139, 250, 0.28); --cta-glow-fade: rgba(167, 139, 250, 0); }
  66%      { --cta-glow: rgba(61, 220, 151, 0.22); --cta-glow-fade: rgba(61, 220, 151, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-cta-glow] { animation: none; }
}

.cta__title {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: -0.96px;
  color: var(--text-primary);
}

.cta__text {
  max-width: 640px;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-tertiary);
}

.cta__inner .btn { margin-top: 8px; }

/* ============ Footer ============ */
/* Compact footer (#4) */
.footer { padding: 64px 0 56px; }

.footer__top {
  display: flex;
  justify-content: space-between;
  /* drop the page links to the bottom-right, level with the social icons (#6) */
  align-items: flex-end;
  gap: 64px;
}

.footer__brand { display: flex; flex-direction: column; gap: 20px; }

/* Mark sits inline at the head of the copyright line */
.footer__logo { display: inline-flex; vertical-align: -5px; margin-right: 8px; }
.footer__logo .nav-logo__mark { width: 20px; height: 20px; }

.footer__copy {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}

.footer__social { display: flex; flex-wrap: wrap; gap: 18px; }

.footer__social a { opacity: 0.55; transition: opacity 0.2s ease; }
.footer__social a:hover { opacity: 1; }
.footer__social img { width: 20px; height: 20px; }

.footer__links {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px 32px;
  align-items: center;
}

.footer__links a,
.footer__links button {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer__links a:hover,
.footer__links button:hover { color: var(--text-primary); }

/* ============ Responsive — 960 ============ */
@media (max-width: 1100px) {
  .hero__title { font-size: 46px; letter-spacing: -0.9px; }
  .hero__row { gap: 64px; }
  .nav-links { gap: 32px; }
}

/* ============ Responsive — 720 ============ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  /* Touch users swipe instead (#1) */
  .create__arrow { display: none; }

  .hero { padding-top: 40px; }
  /* Centre the title on small screens (#1) */
  .hero__title { font-size: 44px; line-height: 1.16; letter-spacing: -0.88px; text-align: center; }

  /* Stack the pitch (title, text, CTA) above the example screen */
  .hero__row { flex-direction: column-reverse; gap: 40px; }
  .hero__pitch { align-items: center; text-align: center; max-width: 520px; gap: 30px; }
  .hero__actions { align-items: center; }
  /* centred here, so the left nudge would throw it off */
  .hero__subtitle { padding-left: 0; font-size: 18px; line-height: 28px; }

  .section-title,
  .cta__title { font-size: 36px; line-height: 44px; letter-spacing: -0.72px; }

  .notif__title { font-size: 17px; }

  .genre-tag { font-size: 24px; }

  /* Footer stacks and centres — same on every page (#6) */
  .footer__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .footer__brand { align-items: center; gap: 24px; }

  /* Phone: social across the top, then the mark beside the page links, with
     the copyright tucked underneath them. display:contents lets the brand's
     children take part in this grid directly. */
  .footer__top {
    display: grid;
    grid-template-areas:
      "social"
      "links"
      "copy";
    /* centres the column track itself; the desktop space-between would
       otherwise pin the single track to the left edge */
    justify-content: center;
    justify-items: center;
    gap: 22px;
  }

  .footer__brand { display: contents; }
  .footer__social { grid-area: social; }
  .footer__links { grid-area: links; }
  .footer__copy { grid-area: copy; margin: 0; }

  /* Social icons centred and spread further apart */
  .footer__social { justify-content: center; gap: 32px; }

  /* Eight links no longer fit on one line, so they wrap onto two rather than
     shrinking the type to the point of illegibility */
  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px clamp(10px, 3.4vw, 28px);
  }

  .footer__links a,
  .footer__links button {
    font-size: clamp(13px, 3.4vw, 16px);
    white-space: nowrap;
  }

  /* Both header controls were filling the bar edge to edge. The bar takes its
     height from them, so it needs its own floor for the smaller ones to sit
     inside rather than just shrinking the bar with them. */
  .nav-wrap { min-height: 52px; }
  .nav-cta { padding: 6px 12px; font-size: 13px; }
  /* no plate behind it — just the three lines */
  .nav-burger {
    width: 30px;
    height: 30px;
    padding: 8px 3px;
    gap: 4px;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .cta { padding: 88px 0 96px; }

  /* a smaller glyph leaves the text enough width that the last word doesn't
     drop onto a line of its own */
  .pay-card { padding: 22px 18px; }
  .pay-card__icon { width: 60px; height: 60px; }

  /* --- more air between sections on phones --- */
  .track-marquee { margin-top: 88px; }
  .payments { padding: 96px 0; }
  .app { padding: 96px 0 112px; }
  .faq { padding: 96px 0; }
  .genres { padding: 88px 0 104px; }
  .create { padding: 96px 0; }
  .logos { padding: 88px 0; }

  /* Inside Musin app — the portrait phone screens take over at this width, so
     the cards stack (text on top, screen underneath) and narrow to suit them.
     All stick at the same offset so they fully cover each other (#5, #8) */
  .app-card {
    flex-direction: column;
    height: 560px;
    max-width: 420px;
    margin-inline: auto;
    top: 96px;
  }

  /* text sits in from the card edge a little further than the screen below it */
  .app-card__panel { flex: 0 0 auto; width: 100%; padding: 26px 26px 6px 36px; }
  .app-card__text { max-width: none; }

  .app-card__screen {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 14px 26px 26px;
  }

  .app-card__screen img { max-width: 100%; max-height: 100%; }
}

/* ============ Responsive — 540 ============ */
@media (max-width: 600px) {
  .container { padding: 0 16px; }

  .hero__title { font-size: 38px; line-height: 1.18; }
  .hero__subtitle { font-size: 18px; line-height: 28px; max-width: 340px; }
  .hero-mockup { width: 288px; height: 568px; }
  .main-phone { transform: translateX(-50%) scale(0.72); }

  .section-title,
  .cta__title { font-size: 30px; line-height: 38px; }

  /* sized so the longest phrase in either landing's hero stays on its line */
  .hero__title { font-size: 26px; line-height: 35px; letter-spacing: -0.5px; }
  .cta__text { font-size: 19px; line-height: 30px; }

  .br-phone { display: inline; }

  .app .app-card__title { text-align: center; }
  .app .app-card__text { text-align: center; max-width: none; }

  /* the counter needs clear separation from the heading beneath it */
  .genres__head { gap: 104px; margin-bottom: 52px; }

  .genres { padding: 64px 0 96px; }
  .genre-tag { font-size: 20px; }
  .genre-lines { gap: 18px; }

  /* the create/payments join sat ~190px apart on a phone */
  .create { padding: 56px 0 64px; }

  .payments { padding-top: 56px; padding-bottom: 96px; }
  .pay-stack { gap: 24px; }
  /* All stick at the same offset so cards fully cover each other (#6) */
  /* a narrower glyph column leaves the copy enough width that its last
     word joins the line above instead of dropping onto its own */
  .pay-card { top: 96px; min-height: 168px; padding: 22px 18px; gap: 14px; }
  .pay-card__icon { flex-basis: 22%; }
  .pay-card__icon img { width: 56px; height: 56px; }
  .pay-card__title { font-size: 22px; line-height: 28px; }
  .pay-card__text { font-size: 16px; line-height: 24px; }

  .logos__group { gap: 64px; padding-right: 64px; }
  .logos__item { height: 26px; }
  .logos__item--stripe { height: 24px; }
  .logos__item--wide { height: 22px; }

  /* Inside Musin app — same stacked card, tightened for phone widths */
  .app-card { height: 470px; max-width: 330px; top: 88px; }
  .app-card__panel { padding: 22px 22px 4px 32px; }
  .app-card__title { font-size: 20px; }
  .app-card__text { font-size: 14px; line-height: 20px; }
  .app-card__screen { padding: 12px 22px 22px; }

  .faq { padding: 96px 0; }
  .faq-list { margin-top: 40px; }
  .faq-item { padding: 16px; }
  .faq-item summary { font-size: 16px; line-height: 24px; }
  .faq-item p { margin-left: 48px; font-size: 15px; }
  .faq-item ul { margin-left: 48px; padding-left: 18px; font-size: 15px; }

  .footer__top { gap: 18px; }
  .footer__copy { font-size: 12px; line-height: 16px; }

  .footer__social { gap: 26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ============ Footer link that opens a dialog ============ */
/* Sits in the same row as the footer anchors, so it has to shed button chrome */
.footer__link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* ============ Support dialog ============ */
.support-dialog,
.legal-dialog {
  width: min(520px, calc(100vw - 32px));
  /* the global reset zeroes margins, which stops a native dialog centring */
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.support-dialog::backdrop,
.legal-dialog::backdrop { background: rgba(0, 0, 0, 0.66); }

.support-dialog__body,
.legal-dialog__body { padding: 32px; }

.support-dialog__head,
.legal-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.support-dialog__title,
.legal-dialog__title { font-size: 24px; line-height: 32px; font-weight: 600; }

.support-dialog__note {
  margin-top: 6px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-tertiary);
}

.support-dialog__close,
.legal-dialog__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.support-dialog__close:hover,
.legal-dialog__close:hover { background: var(--bg-elevated); }

.support-field { margin-top: 20px; }

.support-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.support-field textarea,
.support-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
}

.support-field textarea { min-height: 148px; resize: vertical; }

.support-field textarea:focus,
.support-field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.support-count {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: right;
}

.support-count.is-over { color: var(--brand); }

.support-dialog__foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.support-dialog a { color: var(--text-secondary); }

.support-status {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}

/* ============ Legal dialog ============ */
.legal-dialog__who {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-tertiary);
}

.legal-dialog__who strong { color: var(--text-secondary); }
.legal-dialog__who a { color: var(--text-secondary); }

.legal-dialog__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.legal-dialog__list li + li { margin-top: 2px; }

.legal-dialog__list a {
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}

.legal-dialog__list a:hover { background: var(--bg-elevated); }
.legal-dialog__list span { display: block; font-size: 13px; font-weight: 400; color: var(--text-dim); }

@media (max-width: 600px) {
  .support-dialog__body,
  .legal-dialog__body { padding: 24px; }
  .support-dialog__foot { flex-direction: column; align-items: stretch; }
  .support-dialog__foot .btn { width: 100%; }
}