/* Shared RadioStarLogo: geometry never changes between placements. */
radio-star-logo {
  --logo-size: 2rem;
  display: block;
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  line-height: 0;
}
radio-star-logo[variant="hero"] { --logo-size: 6rem; }
radio-star-logo[variant="final"] { --logo-size: 5.125rem; }
radio-star-logo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  transform: none;
  filter: drop-shadow(0 .5rem 1.5rem rgba(117,71,255,.22));
}

/* Contain decorative lighting at the viewport, not at text boxes. */
html { overflow-x: clip; }
.hero > div:first-child { min-width: 0; }
.hero h1 {
  width: max-content;
  max-width: min(750px, calc(100vw - 40px)) !important;
  padding: .1em .08em .16em !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.hero-accent {
  display: inline-block;
  padding: .1em .08em .14em;
  line-height: 1.13;
  vertical-align: baseline;
  overflow: visible;
}
@media (max-width: 850px) {
  .hero h1 { max-width: 100% !important; margin-inline: auto; }
}

/* Closing composition grows with content and retains the existing lighting. */
.final {
  min-height: 0;
  padding: 90px 14px;
}
.finalInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 1180px;
}
.finalInner > .brand { margin-top: 24px; }
.final h2 {
  max-width: 100%;
  line-height: 1.08;
  padding: .08em .08em .16em;
  margin: 36px 0 0;
  overflow: visible;
}
.finalInner > .primary { display: inline-block; margin-top: 32px; }
.finalInner > .micro {
  margin: 20px 0 0;
  max-width: 38rem;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 430px) {
  .final h2 { font-size: clamp(52px, 16.25vw, 58px); }
}
@media (min-width: 768px) {
  .final { padding: 120px 24px; }
  .final h2 { margin-top: 48px; }
  .finalInner > .primary { margin-top: 42px; }
}
@media (min-width: 1024px) {
  .final { padding-block: 160px; }
}