body[data-brand-page-key] [data-back-to-top][hidden] {
  display: none;
}

/* Figma 1209:5262: the three CMS Banner surfaces share one landscape image on H5. */
@media (max-width: 860px) {
  body[data-brand-page-key="home"] .bhome-hero,
  body[data-brand-page-key="home"] :is(.bhome-hero-carousel, .bhome-hero-fallback),
  body[data-brand-page-key="business"] .business-hero,
  body[data-brand-page-key="join"] .join-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 169;
  }

  body[data-brand-page-key] :is(.bhome-hero-slide, .business-hero-slide, .join-hero .hero-slide) > :is(a, img),
  body[data-brand-page-key] :is(.bhome-hero-slide, .business-hero-slide, .join-hero .hero-slide) > a > img,
  body[data-brand-page-key="home"] .bhome-hero-fallback img,
  body[data-brand-page-key="business"] .business-hero-fallback img {
    display: block;
    width: 100%;
    height: 100%;
  }

  body[data-brand-page-key] :is(.bhome-hero-slide, .business-hero-slide, .join-hero .hero-slide) img,
  body[data-brand-page-key="home"] .bhome-hero-fallback img,
  body[data-brand-page-key="business"] .business-hero-fallback img {
    object-fit: cover;
    object-position: center;
  }
}

/* Shared desktop canvas: preserve the 1480px composition on wide screens while
   keeping compact desktop layouts near 84% of the viewport across every brand page. */
@media (min-width: 861px) {
  body[data-brand-page-key] {
    --brand-desktop-inline-gap: clamp(48px, 16vw, 240px);
    --brand-desktop-side-gap: clamp(24px, 8vw, 120px);
    --brand-desktop-canvas-width: min(calc(100% - var(--brand-desktop-inline-gap)), 1480px);
    --brand-desktop-canvas-inset: max(var(--brand-desktop-side-gap), calc((100% - 1480px) / 2));
  }

  body[data-brand-page-key] :is(
    .bhome-shell,
    .bhome-hero-carousel,
    .bhome-hero-fallback,
    .news-v2-shell,
    .news-v2-detail-shell,
    .creator-shell,
    .original-video-catalog,
    .original-topic-shell,
    .original-detail-shell,
    .join-hero,
    .business-hero,
    .business-services
  ) {
    width: var(--brand-desktop-canvas-width);
  }

  /* Dynamic second- and third-level routes opt into the same compact desktop
     canvas explicitly so their page-specific styles cannot fall out of sync. */
  body[data-brand-page-key] .brand-secondary-canvas {
    width: var(--brand-desktop-canvas-width);
    max-width: 1480px;
    min-width: 0;
    margin-inline: auto;
  }

  body[data-brand-page-key] .join-apply-shell {
    width: min(calc(100% - var(--brand-desktop-inline-gap)), 1484px);
  }

  body[data-brand-page-key="home"] .bhome-stats > .bhome-shell {
    width: min(calc(100% - var(--brand-desktop-inline-gap)), 1521px);
  }

  body[data-brand-page-key="home"] .bhome-hero {
    height: auto;
  }

  body[data-brand-page-key="home"] :is(.bhome-hero-carousel, .bhome-hero-fallback),
  body[data-brand-page-key="business"] .business-hero {
    height: auto;
    aspect-ratio: 1480 / 635;
  }

  body[data-brand-page-key] :is(
    .about-document,
    .faq-document,
    .cms-page-shell,
    .business-detail,
    .business-article,
    .business-partners
  ) {
    padding-inline: var(--brand-desktop-canvas-inset);
  }

  body[data-brand-page-key] .brand-secondary-document {
    width: 100%;
    max-width: 1920px;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--brand-desktop-canvas-inset);
  }

  body[data-brand-page-key] .brand-footer-shell {
    padding-inline: var(--brand-desktop-canvas-inset);
  }
}

@media (min-width: 861px) and (max-width: 1600px) {
  body[data-brand-page-key="home"] .bhome-stats-layout {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 64px);
  }

  body[data-brand-page-key="home"] .bhome-stats-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 734 / 586;
  }

  body[data-brand-page-key="home"] .bhome-stats-visual picture,
  body[data-brand-page-key="home"] .bhome-stats-visual img {
    width: 100%;
    height: 100%;
  }

  body[data-brand-page-key="home"] .bhome-stats-visual picture {
    clip-path: inset(0 round clamp(24px, 4vw, 64px));
  }

  body[data-brand-page-key="home"] .bhome-stats-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 30px) clamp(16px, 2.5vw, 39px);
  }

  body[data-brand-page-key="home"] .bhome-stats-grid article {
    min-width: 0;
    height: clamp(132px, 11.5vw, 184px);
    padding: clamp(16px, 1.5vw, 20px) clamp(16px, 2vw, 30px);
  }

  body[data-brand-page-key="home"] .bhome-stats-grid strong {
    font-size: clamp(48px, 4vw, 64px);
  }

  body[data-brand-page-key="home"] .bhome-stats-grid em,
  body[data-brand-page-key="home"] .bhome-stats-grid span {
    font-size: 16px;
  }

  body[data-brand-page-key="artist"] .artist-hero {
    grid-template-columns: minmax(0, 51%) minmax(0, 1fr);
    gap: clamp(32px, 3vw, 50px);
  }

  body[data-brand-page-key="artist"] .artist-hero-image {
    width: auto;
  }

  body[data-brand-page-key="artist"] .artist-hero-copy {
    width: auto;
    padding-right: clamp(24px, 2vw, 32px);
  }

  body[data-brand-page-key="artist"] .artist-hero-copy dl {
    gap: 24px 18px;
    padding: 28px 24px;
  }
}

@media (min-width: 1281px) {
  body[data-brand-page-key] .brand-nav {
    width: min(calc(100% - var(--brand-desktop-inline-gap)), 1440px);
  }
}