.product-radio {
  --ink: #f5f5f5;
  --muted: #a8a8a8;
  --line: #303030;
  --paper: #080808;
  background: #080808;
  color: var(--ink);
}
.product-radio .product-header { background: #080808ed; border-color: #282828; }
.product-radio .studio-brand, .product-radio .studio-brand > span { color: #f5f5f5; }
.product-radio .studio-brand > span > span { color: #a8a8a8; }
.product-radio .product-header nav > a, .product-radio .app-switcher summary { color: #c0c0c0; }
.product-radio .switcher-menu { background: #161616; border-color: #333; }
.product-radio .switcher-menu a { color: #eee; }
.product-radio .switcher-menu a:hover, .product-radio .switcher-menu a[aria-current] { background: #262626; }
.product-radio .primary-button { background: #176bc4; color: white; border-radius: 5px; font-size: 14px; padding: 16px 24px; }
.product-radio .primary-button:hover { background: #2077d2; }
.product-radio .eyebrow { color: #8cbfff; letter-spacing: 2px; }
.product-radio .radio-hero { padding: 56px 0 20px; overflow: hidden; }
.product-radio .radio-hero .product-lockup { justify-content: flex-start; gap: 13px; }
.product-radio .product-lockup > .product-icon { width: 38px; height: 38px; border-radius: 9px; }
.product-radio .radio-live-tag { display: flex; align-items: center; gap: 8px; color: #999; font-size: 9px; letter-spacing: 1.6px; margin-left: auto; }
.product-radio .radio-live-tag i { width: 6px; height: 6px; background: #00a300; border-radius: 50%; box-shadow: 0 0 10px #00a30080; }
.radio-hero-copy { display: grid; grid-template-columns: 1.5fr .65fr; gap: 110px; align-items: end; margin-top: 49px; }
.radio-hero-copy h1 { font-size: clamp(54px, 6.3vw, 88px); line-height: 1.02; letter-spacing: -4.2px; font-weight: 600; margin: 22px 0 0; }
.radio-hero-copy h1 em { color: #a8a8a8; font-style: normal; }
.radio-lede { font-size: 17px; line-height: 1.8; max-width: 590px; color: #bcbcbc; margin-top: 25px; }
.radio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.radio-text-link { color: #eee; font-size: 12px; border-bottom: 1px solid #555; padding-bottom: 5px; }
.radio-text-link:hover { color: #8cbfff; border-color: #8cbfff; }
.radio-open-note { margin-top: 15px; color: #929292; font-size: 10px; }
.radio-hero-aside { padding: 25px 0 4px 26px; border-left: 1px solid #333; }
.radio-index { font-size: 8px; letter-spacing: 1.5px; color: #8c8c8c; }
.radio-count { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.radio-count strong { font-size: 74px; line-height: 1; font-weight: 500; letter-spacing: -4px; }
.radio-count > span { color: #d2d2d2; font-size: 14px; line-height: 1.65; }
.radio-flags { margin-top: 27px; font-size: 21px; line-height: 1.8; }
.radio-hero-aside > p { color: #929292; font-size: 10px; line-height: 1.85; margin-top: 10px; }
.radio-actual { position: relative; margin: 49px 0 0; padding-bottom: 54px; }
.radio-desktop-shot { border: 1px solid #353535; border-radius: 10px; overflow: hidden; background: black; box-shadow: 0 15px 60px #0007; }
.radio-desktop-shot img { display: block; width: 100%; height: auto; }
.radio-phone-shot { position: absolute; bottom: 56px; right: -16px; width: 205px; border: 5px solid #323232; border-radius: 25px; overflow: hidden; background: black; box-shadow: 0 15px 60px #000b; }
.radio-phone-shot img { display: block; width: 100%; height: auto; }
.radio-actual figcaption { display: flex; gap: 20px; justify-content: space-between; margin-top: 18px; color: #969696; font-size: 10px; line-height: 1.7; }
.radio-actual figcaption a { color: #bcd9ff; white-space: nowrap; }
.product-radio .product-facts { border-color: #333; color: #ddd; }
.product-radio .product-facts span::before { background: #00aba9; }
.product-radio .product-intro { padding-top: 72px; }
.product-radio .editorial-heading > p { color: #a8a8a8; }
.product-radio .story-heading h2 { color: #f5f5f5; }
.radio-station-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.radio-station { min-height: 200px; position: relative; color: white; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #00a300; }
.radio-station::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at bottom right, #0004, transparent 70%); pointer-events: none; }
.radio-station > * { position: relative; }
.radio-station-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.radio-station-top > span:first-child { opacity: .5; font-size: 23px; }
.radio-station-genre { font-size: 9px; letter-spacing: .7px; text-transform: uppercase; opacity: .85; }
.radio-station h3 { font-size: 28px; line-height: 1.15; font-weight: 650; margin: 4px 0 8px; letter-spacing: -.8px; }
.radio-station p { font-size: 10px; line-height: 1.6; max-width: 90%; opacity: .9; }
.radio-station-arrow { position: absolute; right: 16px; bottom: 18px; font-size: 18px; }
.radio-station:hover { filter: brightness(1.15); }
.radio-station:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.station-color-1 { background: #2d89ef; }
.station-color-2 { background: #9f00a7; }
.station-color-3 { background: #603cba; }
.station-color-4 { background: #da532c; }
.station-color-5 { background: #b91d47; }
.station-color-6 { background: #00aba9; }
.station-color-7 { background: #7e3878; }
.radio-collection-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 25px; }
.radio-collection-footer p { color: #999; font-size: 11px; }
.radio-device-band { background: #111; border-block: 1px solid #252525; }
.radio-mobile-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; align-items: start; max-width: 510px; margin-inline: auto; }
.radio-mobile-pair figure { min-width: 0; }
.radio-mobile-pair img { width: 100%; height: auto; border: 4px solid #333; border-radius: 22px; display: block; }
.radio-mobile-pair figure:nth-child(2) { margin-top: 45px; }
.radio-mobile-pair figcaption { font-size: 10px; color: #aaa; line-height: 1.7; margin-top: 16px; text-align: center; }
.product-radio .editorial-cards article { border-color: #353535; }
.product-radio .card-glyph { color: #8cbfff; }
.product-radio .faq-section { border-color: #303030; }
.product-radio .faq-list details { border-color: #333; }
.product-radio .faq-list summary { color: #eee; }
.product-radio .contact-section > div { background: #121212; border: 1px solid #333; border-radius: 8px; }
.product-radio .related-card { background: #141414; border-color: #333; color: #f5f5f5; }
.product-radio .related-card:hover { background: #1e1e1e; }
.product-radio .product-footer { border-color: #333; }
@media (max-width: 1000px) {
  .radio-hero-copy { gap: 40px; grid-template-columns: 1.4fr .7fr; }
  .radio-phone-shot { right: 12px; width: 155px; }
  .radio-station-grid { grid-template-columns: repeat(3, 1fr); }
  .radio-station { min-height: 190px; }
}
@media (max-width: 700px) {
  .product-radio .radio-hero { padding-top: 32px; }
  .product-radio .radio-live-tag { font-size: 7px; letter-spacing: .8px; max-width: 145px; line-height: 1.7; }
  .radio-hero-copy { display: block; margin-top: 37px; }
  .radio-hero-copy h1 { font-size: clamp(43px, 9.3vw, 64px); letter-spacing: -2.7px; }
  .radio-lede { font-size: 15px; margin-top: 23px; }
  .radio-actions { gap: 18px; }
  .radio-hero-aside { display: none; }
  .radio-actual { margin-top: 34px; padding-bottom: 15px; }
  .radio-desktop-shot { display: none; }
  .radio-phone-shot { position: static; width: min(100%, 360px); margin: 0 auto; border-width: 4px; border-radius: 22px; max-height: 560px; }
  .radio-actual figcaption { display: block; text-align: center; font-size: 9px; }
  .radio-actual figcaption a { display: block; margin-top: 8px; }
  .radio-station-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .radio-station { min-height: 180px; padding: 13px; }
  .radio-station h3 { font-size: 25px; }
  .radio-station p { font-size: 9px; max-width: 84%; }
  .radio-station-arrow { right: 12px; bottom: 14px; }
  .radio-collection-footer { align-items: start; }
  .radio-collection-footer .radio-text-link { font-size: 10px; white-space: nowrap; }
  .radio-mobile-pair { gap: 15px; }
  .radio-mobile-pair img { border-width: 3px; border-radius: 16px; }
  .product-radio .contact-section h2 { font-size: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-radio * { scroll-behavior: auto !important; transition: none !important; }
}
