/* Shared by /legal, /terms and /privacy-policy. Scoped under .rb-legal.

   A measure around 70 characters, because these are documents people are
   expected to actually read rather than scroll past — the thing that makes a
   policy page unreadable is usually line length, not vocabulary. */

.rb-legal { max-width: 720px; margin: 0 auto; padding: 56px 20px 80px; color: #e8e8e8; }

.rb-legal .legal-head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid #262626; }
.rb-legal .legal-kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.rb-legal .legal-kicker a { color: #8f8f8f; text-decoration: none; }
.rb-legal .legal-kicker a:hover { color: #1DB954; }
.rb-legal .legal-head h1 { margin: 0 0 8px; font-size: 38px; line-height: 1.1; color: #fff; }
.rb-legal .legal-date { margin: 0; font-size: 14px; color: #8f8f8f; }

.rb-legal .clause { margin-bottom: 36px; scroll-margin-top: 24px; }
.rb-legal .clause h2 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.rb-legal .clause p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: #c8c8c8; }
.rb-legal .clause p:last-child { margin-bottom: 0; }
.rb-legal .clause strong { color: #fff; }
.rb-legal .clause a { color: #1DB954; }
.rb-legal .clause ul { margin: 0 0 14px; padding-left: 22px; }
.rb-legal .clause li { margin-bottom: 8px; font-size: 16px; line-height: 1.7; color: #c8c8c8; }

/* The refund section is the one people arrive at from a link, so it is the one
   that must not look like every other paragraph when the page jumps to it. */
.rb-legal #refunds {
  background: #121212; border: 1px solid #262626; border-left: 3px solid #1DB954;
  border-radius: 10px; padding: 24px 24px 22px;
}

.rb-legal-hub .legal-index { list-style: none; margin: 0; padding: 0; }
.rb-legal-hub .legal-index li {
  border: 1px solid #262626; border-radius: 12px; background: #161616;
  padding: 24px; margin-bottom: 16px;
}
.rb-legal-hub .legal-index a { text-decoration: none; }
.rb-legal-hub .legal-index h2 { margin: 0 0 8px; font-size: 20px; color: #fff; }
.rb-legal-hub .legal-index li:hover { border-color: #1DB954; }
.rb-legal-hub .legal-index li:hover h2 { color: #1DB954; }
.rb-legal-hub .legal-index p { margin: 0; font-size: 15px; line-height: 1.7; color: #b0b0b0; }
.rb-legal-hub .legal-index p a { color: #1DB954; }
.rb-legal-hub .legal-foot { margin-top: 32px; font-size: 15px; color: #8f8f8f; }
.rb-legal-hub .legal-foot a { color: #1DB954; }

@media (max-width: 600px) {
  .rb-legal { padding: 36px 16px 64px; }
  .rb-legal .legal-head h1 { font-size: 28px; }
}