/* Align every desktop section rail with the logo's right edge. */
@media (min-width: 721px) {
  [data-cp-section-rail] {
    --cp-logo-right: calc(
      max(0px, calc(min(50vw, 720px) - 720px))
      + clamp(24px, min(5vw, 72px), 72px)
      + 74.6px
    );
    padding-right: max(
      0px,
      calc(clamp(72px, min(16vw, 230.4px), 256px) - var(--cp-logo-right))
    ) !important;
  }
}

/* Keep the 1440px composition intact on iMac and other wide displays. */
@media (min-width: 1441px) {
  section[data-screen-label],
  footer[data-m-foot] {
    width: 100%;
    max-width: 1440px;
    margin-right: auto !important;
    margin-left: auto !important;
    position: relative;
    isolation: isolate;
  }

  /* Preserve each section's full-bleed background outside the 1440px canvas. */
  section[data-screen-label]::before,
  footer[data-m-foot]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: inherit;
    pointer-events: none;
  }

  /* Dark animated panels use a child layer instead of the section background. */
  section[data-screen-label] [data-cp-dark] {
    right: auto !important;
    left: 50% !important;
    width: 100vw;
    transform: translateX(-50%);
  }

  /* Decorative background layers remain full-bleed while content stays at 1440px. */
  section[data-screen-label] [data-cp-wide-bg] {
    right: auto !important;
    left: 50% !important;
    width: 100vw;
    transform: translateX(-50%);
  }

  /* The hero used overflow:hidden on the 1440px canvas; move that clipping to its full-bleed layer. */
  section[data-screen-label="Hero"] {
    overflow: visible !important;
  }

  section[data-screen-label="Hero"] [data-cp-wide-bg] {
    overflow: hidden;
  }

  section[data-screen-label],
  footer[data-m-foot] {
    grid-template-columns: 230.4px minmax(0, 1fr) !important;
  }

  section[data-screen-label] [data-m-spine],
  section[data-screen-label] [data-m-railx],
  footer[data-m-foot] > [data-m-spine] {
    left: 230.4px !important;
  }

  /* Freeze the rail alignment at its 1440px value on wider displays. */
  [data-cp-section-rail] {
    padding-right: 83.8px !important;
  }
}