/* Let the brand surfaces reach the edges of wide screens. */
@media (min-width: 1151px) {
  body.site-page {
    --desktop-gutter: clamp(32px, 3.5vw, 80px);
  }

  body.site-page .container {
    width: min(1760px, calc(100% - 2 * var(--desktop-gutter)));
  }

  body.site-page #main {
    overflow-x: clip;
    background:
      radial-gradient(ellipse 40vw 760px at 100% 480px, #CEDCC470, transparent 80%),
      radial-gradient(ellipse 38vw 680px at 0% 440px, #E8B79A55, transparent 80%),
      radial-gradient(ellipse 36vw 900px at 100% 1700px, #C7D9E85C, transparent 80%),
      radial-gradient(ellipse 40vw 1000px at 0% 2400px, #CEDCC466, transparent 80%);
  }

  body.site-page[data-page="home"] .hero-atmosphere {
    inset-inline: calc((100% - 100vw) / 2);
    border-radius: 0;
  }

  body.site-page[data-page="home"] .hero.hero-showcase {
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
    column-gap: clamp(40px, 5vw, 96px);
  }

  body.site-page[data-page="home"] .hero.hero-showcase .hero-copy {
    max-width: 640px;
  }

  body.site-page .native-demo-section::before {
    inset-inline-end: calc((100% - 100vw) / 2);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Wider grids should not stretch the app UI or the calendar squares. */
  body.site-page .time-layout > .year-visual {
    width: 100%;
    max-width: 650px;
    justify-self: end;
  }

  body.site-page .time-copy > p,
  body.site-page .native-demo-copy > p,
  body.site-page .feedback-copy > p {
    max-width: 58ch;
  }

  body.site-page .site-footer.container {
    width: 100%;
    padding-inline: max(var(--desktop-gutter), calc((100% - 1760px) / 2));
    background: linear-gradient(90deg, #CEDCC470, #F7F2E9 40%, #C7D9E850);
  }
}