/* PCMusicMax V2 — Song Connections research prototype */
.pcm-connections-page { background: #fff; color: #15171a; }
.pcm-connection-hero { padding: 76px 0 58px; background: linear-gradient(180deg,#f7f9fc 0%,#fff 100%); border-bottom: 1px solid #e5e8ed; }
.pcm-connection-hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 70px; align-items: start; }
.pcm-connection-hero h1 { margin: 8px 0 20px; max-width: 850px; font-size: clamp(54px,8vw,108px); line-height: .9; letter-spacing: -.055em; }
.pcm-connection-deck { max-width: 820px; margin: 0; color: #565d68; font-size: clamp(19px,2.2vw,25px); line-height: 1.5; }
.pcm-connection-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 34px; padding: 8px; background: #fff; border: 1px solid #dfe3e9; border-radius: 18px; box-shadow: 0 18px 50px rgba(22,28,40,.08); }
.pcm-connection-search input { min-width: 0; height: 56px; padding: 0 18px; border: 0 !important; outline: 0; background: transparent; color: #15171a; font-size: 16px; }
.pcm-connection-search button { min-height: 56px; padding: 0 22px; border: 0; border-radius: 12px; background: #15171a; color: #fff; font-weight: 800; }
.pcm-prototype-note { max-width: 800px; margin: 17px 0 0; color: #777e89; font-size: 13px; line-height: 1.55; }
.pcm-connection-how { padding: 30px; background: #15171a; color: #fff; border-radius: 24px; box-shadow: 0 20px 70px rgba(22,28,40,.14); }
.pcm-connection-how .pcm-eyebrow { color: #f7c946; }
.pcm-connection-how ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.pcm-connection-how li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.pcm-connection-how li > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #3a3e45; border-radius: 50%; font-size: 11px; font-weight: 900; color: #f7c946; }
.pcm-connection-how strong,.pcm-connection-how small { display: block; }
.pcm-connection-how strong { font-size: 16px; }
.pcm-connection-how small { margin-top: 5px; color: #aeb4be; font-size: 13px; line-height: 1.45; }
.pcm-connection-results { padding: 72px 0 86px; }
.pcm-connection-results-heading { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 32px; }
.pcm-connection-results-heading h2 { margin: 7px 0 0; font-size: clamp(34px,5vw,58px); line-height: 1; }
.pcm-connection-results-heading > p { margin: 0 0 5px; color: #7b828d; font: 800 11px/1.2 'Manrope',sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pcm-connection-list { border-top: 1px solid #dde1e7; }
.pcm-connection-row { display: grid; grid-template-columns: 86px minmax(180px,1fr) 40px minmax(180px,1fr) minmax(230px,.9fr); gap: 22px; align-items: center; padding: 28px 0; border-bottom: 1px solid #e6e9ee; }
.pcm-connection-type { align-self: start; display: inline-flex; width: max-content; padding: 7px 9px; border-radius: 999px; background: #15171a; color: #fff; font: 800 10px/1 'Manrope',sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pcm-record-node span { display: block; color: #9299a3; font: 800 9px/1 'Manrope',sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pcm-record-node h3 { margin: 7px 0 4px; font-size: 24px; line-height: 1.05; }
.pcm-record-node p { margin: 0; color: #5f6670; font-size: 13px; }
.pcm-connection-arrow { color: #c4c9d1; font-size: 28px; text-align: center; }
.pcm-research-badge { display: inline-flex; padding: 6px 8px; border-radius: 999px; background: #fff4cf; color: #765b00; font: 800 9px/1 'Manrope',sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.pcm-connection-angle p { margin: 9px 0 0; color: #656c76; font-size: 13px; line-height: 1.5; }
.pcm-source-link { display: inline-flex; margin-top: 10px; color: #246bfd !important; font: 800 11px/1.2 'Manrope',sans-serif; text-decoration: none !important; }
.pcm-source-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.pcm-no-connections { padding: 42px; background: #f5f7fa; border: 1px solid #e1e5ea; border-radius: 22px; }
.pcm-no-connections h2 { margin-top: 0; font-size: 34px; }
.pcm-no-connections p { max-width: 740px; color: #666d77; }
.pcm-connection-next { padding: 66px 0; background: #15171a; color: #fff; }
.pcm-connection-next-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; }
.pcm-connection-next h2 { margin: 6px 0 12px; color: #fff; font-size: clamp(34px,5vw,58px); line-height: 1; }
.pcm-connection-next p { max-width: 720px; margin: 0; color: #b9bec7; }
.pcm-connection-next-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.pcm-next-primary,.pcm-next-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 13px 17px; border-radius: 999px; font: 800 12px/1 'Manrope',sans-serif; text-decoration: none !important; }
.pcm-next-primary { background: #fff; color: #15171a !important; }
.pcm-next-secondary { border: 1px solid #3e434c; color: #fff !important; }
.pcm-connection-principles { padding: 72px 0 90px; background: #f5f7fa; border-top: 1px solid #e4e7ec; }

@media (max-width: 1080px) {
  .pcm-connection-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .pcm-connection-how { max-width: 720px; }
  .pcm-connection-row { grid-template-columns: 70px 1fr 28px 1fr; }
  .pcm-connection-angle { grid-column: 2 / -1; }
}

@media (max-width: 720px) {
  .pcm-connection-hero { padding: 52px 0 42px; }
  .pcm-connection-search { grid-template-columns: 1fr; }
  .pcm-connection-search button { width: 100%; }
  .pcm-connection-results { padding: 52px 0 68px; }
  .pcm-connection-results-heading { grid-template-columns: 1fr; gap: 12px; }
  .pcm-connection-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .pcm-connection-arrow { text-align: left; transform: rotate(90deg); transform-origin: left center; margin: 2px 0 4px 9px; }
  .pcm-connection-angle { grid-column: auto; }
  .pcm-connection-next-inner { grid-template-columns: 1fr; gap: 24px; }
  .pcm-connection-next-actions { justify-content: flex-start; }
}