.ua-announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.65rem 1rem;
  border-block-end: 1px solid var(--universe-line);
  background: color-mix(in srgb, var(--universe-color-primary) 18%, var(--universe-color-surface));
  color: var(--universe-color-text);
  text-align: center;
}

.ua-announcement-bar[data-announcement-dismissible="true"] {
  justify-content: space-between;
}

.ua-announcement-message {
  min-width: 0;
  margin: 0;
  font-weight: var(--universe-font-weight-strong);
}

.ua-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.ua-social-link {
  display: inline-grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-inline-size: 2.55rem;
  min-block-size: 2.55rem;
  border: var(--universe-elev-2-border);
  border-color: color-mix(in srgb, var(--universe-color-primary) 34%, var(--universe-line));
  border-radius: 999rem;
  color: var(--universe-color-text);
  background: var(--ua-glass-text-led);
  box-shadow: var(--universe-elev-2-shadow);
  backdrop-filter: var(--ua-glass-frost);
  -webkit-backdrop-filter: var(--ua-glass-frost);
  text-decoration: none;
  overflow: hidden;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ua-social-link::after {
  content: "";
  position: absolute;
  inset: 0.22rem;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--universe-color-text) 12%, transparent);
}

.ua-social-link-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.18rem;
  block-size: 1.18rem;
  color: currentColor;
}

.ua-social-link-icon svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ua-social-link span:not(.visually-hidden) {
  padding-inline: 0.45rem;
}

.ua-social-link-badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.18rem;
  font-size: 0.66rem;
  font-weight: var(--universe-font-weight-display-strong);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ua-file-preview {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  border: 1px solid var(--universe-line);
  border-radius: var(--universe-radius-card, 0.5rem);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--universe-color-surface) 86%, transparent);
}

.ua-file-preview-media {
  width: 100%;
  max-height: 24rem;
  object-fit: contain;
  border-radius: var(--universe-radius-control, 0.35rem);
}

/* The video branch is ua.media.player ([[D364]]), which is a figure and not a replaced element — so the
   image rules above must NOT reach it. It sizes itself; the class is here for scoping. */

.ua-file-preview-meta {
  display: grid;
  gap: 0.15rem;
  color: var(--universe-color-muted);
}

.ua-hero-copy {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 48rem;
}

.ua-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5.8rem);
  line-height: 0.96;
}

.ua-hero-supporting-copy {
  display: grid;
  gap: 0.45rem;
  max-width: 42rem;
  margin: 0;
  color: var(--universe-color-muted);
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.ua-hero-supporting-copy > * {
  margin-block: 0;
}

@media (max-width: 42rem) {
  .ua-announcement-bar {
    align-items: stretch;
    flex-direction: column;
    text-align: start;
  }
}