/* Shared site styles. Headings in Bebas Neue, the lettering the owner picked on the watchlists page (25 September 2026).
   Loaded after each page's own styles so it wins. Small card titles stay in Lato: Bebas is a
   display face and turns thin below about 24px. */
.hero h1, .sec-title, .screen-name, .band-copy h3, .card h2, .glass-card h2, .success h2 {
  font-family: 'Bebas Neue', 'Lato', sans-serif;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.05;
}
.hero h1 { font-size: 66px; }
.sec-title { font-size: 48px; }
.screen-name { font-size: 32px; }
.band-copy h3 { font-size: 40px; }
.card h2, .glass-card h2, .success h2 { font-size: 30px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 48px; }
  .sec-title { font-size: 38px; }
  .band-copy h3 { font-size: 32px; }
  .card h2, .glass-card h2, .success h2 { font-size: 26px; }
}

/* Links inside text: gold and bold, no underline (owner, 25 September: "it's not 1995") */
p a, li a { color: #e4b348; font-weight: 700; text-decoration: none; }
p a:hover, li a:hover { color: #f3cf7a; }

/* the feature pages row under each footer */
.footer-features { margin-top: 12px; }

/* ---- One top bar on every page (26 September 2026). Before, each page had its own links and
   every one hid them on phones, leaving nothing in the top right. Desktop: the main links and
   Download, plus the menu. Phone: Download and the menu. ---------------------------------- */
.rnav { position: relative; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1100px; margin: 0 auto; padding: 16px 24px; font-family: 'Lato', sans-serif; }
.rnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.rnav-brand img { width: 42px; height: 42px; display: block; }
.rnav-brand span { font-size: 20px; font-weight: 900; color: #e4b348; letter-spacing: .5px; }
.rnav-links { display: flex; align-items: center; gap: 22px; }
.rnav-links > a { color: #c9a24a; text-decoration: none; font-size: 15px; font-weight: 700; padding: 8px 0; }
.rnav-links > a:hover, .rnav-links > a[aria-current] { color: #f3cf7a; }
.rnav-links > a.rnav-cta { background: #e4b348; color: #000; padding: 9px 18px; border-radius: 999px; }
.rnav-links > a.rnav-cta:hover { color: #000; box-shadow: 0 0 18px rgba(228, 179, 72, .45); }
.rnav-menu { position: relative; }
.rnav-menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(228, 179, 72, .45); background: rgba(22, 22, 24, .7); }
.rnav-menu > summary::-webkit-details-marker { display: none; }
.rnav-menu > summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #e4b348; transition: transform .2s, opacity .2s; }
.rnav-menu[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rnav-menu[open] > summary span:nth-child(2) { opacity: 0; }
.rnav-menu[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rnav-panel { position: absolute; right: 0; top: 54px; width: 270px; padding: 8px; border-radius: 18px; background: #101012;
  border: 1px solid rgba(228, 179, 72, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .75); }
.rnav-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; border-radius: 12px;
  color: #eee; text-decoration: none; font-size: 16px; font-weight: 700; }
.rnav-panel a::after { content: "\203A"; color: #e4b348; font-size: 22px; }
.rnav-panel a:hover, .rnav-panel a[aria-current] { background: rgba(228, 179, 72, .12); color: #f3cf7a; }
.rnav-panel hr { border: 0; border-top: 1px solid #2c2c2c; margin: 6px 8px; }
@media (max-width: 760px) {
  .rnav { padding: 12px 16px; }
  .rnav-links { gap: 10px; }
  .rnav-links > a:not(.rnav-cta) { display: none; }
  .rnav-brand img { width: 36px; height: 36px; }
}

/* ---- The one button style on the site (owner, 26 September: "a uniform button"): gold pill,
   black bold words, an arrow that nudges on hover. .play swaps the arrow for a play symbol. ---- */
.btn-gold { display: inline-flex; align-items: center; gap: 8px; background: #e4b348; color: #000 !important; font: 900 14px 'Lato', sans-serif;
  padding: 10px 18px; border-radius: 999px; border: 0; text-decoration: none; cursor: pointer; transition: box-shadow .2s; }
.btn-gold::after { content: "\2192"; font-size: 15px; transition: transform .2s; }
.btn-gold.play::after { content: none; }
.btn-gold svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.btn-gold:hover, .btn-gold:focus-visible, a:hover > .btn-gold, a:focus-visible > .btn-gold { box-shadow: 0 0 18px rgba(228, 179, 72, .45); color: #000; }
.btn-gold:hover::after, .btn-gold:focus-visible::after, a:hover > .btn-gold::after, a:focus-visible > .btn-gold::after { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Anything you can press says so: a gold "›" on cards and rows that are links. ----------- */
.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #e4b348; font-weight: 800; font-size: 14px; }
.go::after { content: "\203A"; font-size: 20px; line-height: 1; transition: transform .2s; }
a:hover .go::after, a:focus-visible .go::after { transform: translateX(4px); }

/* ---- Phones: footer links and question rows big enough to tap. ------------------------------ */
@media (max-width: 640px) {
  .footer-links { gap: 4px 6px !important; }
  .footer-links a { display: inline-block; padding: 10px 8px; }
  details > summary { min-height: 44px; }
}