/* The homepage artwork is rendered in a centered 1680px shell. Its original
   64/1440 inner gutter leaves a 1530.67px content area at the desktop cap.
   Keep redesigned pages on that same inner grid instead of scaling them to
   91.11% of the entire browser viewport. */
:root {
  --site-content-width: min(1530.6667px, calc(91.1111111111% - 43.7333px));
}

@media (min-width: 801px) {
  body.buy-design-page .buy-main,
  body.login-design-page .login-design-main,
  body.student-dashboard-page .student-home,
  body.course-design-page-shell .course-design-shell,
  body.purchase-checkout-immersive .checkout-design-shell,
  body.payment-result-immersive .payment-result-design-shell {
    box-sizing: border-box;
    width: var(--site-content-width);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  body.purchase-checkout-immersive .checkout-design-header,
  body.purchase-checkout-immersive .checkout-design-footer,
  body.payment-result-immersive .payment-result-design-header,
  body.payment-result-immersive .payment-result-design-footer {
    display: none;
  }

  body.purchase-checkout-immersive .checkout-design-page,
  body.payment-result-immersive .payment-result-design-page {
    min-height: 0;
    padding-bottom: 32px;
  }

  body.payment-result-immersive .payment-success-card,
  body.payment-result-immersive .payment-result-pending-card,
  body.payment-result-immersive .payment-result-guarantees {
    max-width: none;
  }

  /* Student overview and directory pages share the same desktop grid. Keep
     focused reading, answering and video-watching views at their own widths. */
  body.student-video-list-immersive .student-video-page,
  body.student-video-course-immersive .student-video-page,
  .my-courses,
  .student-home,
  .student-learning-page,
  .student-files-page,
  .student-handout-shell:not(:has(.student-handout-content)):not(.protocol-practice-shell),
  body:not(.admin-layout-page) .protocol-practice-shell:has(.protocol-practice-directory) {
    box-sizing: border-box;
    width: var(--site-content-width);
    max-width: none;
    margin-inline: auto;
  }
}

@media (min-width: 801px) and (max-width: 1080px) {
  :root {
    --site-content-width: calc(91.1111111111% - 25.5111px);
  }
}

/* Preserve the compact checkout and payment navigation on small screens. */
@media (max-width: 800px) {
  body.purchase-checkout-immersive .purchase-homepage-header,
  body.purchase-checkout-immersive .purchase-homepage-footer {
    display: none;
  }
  body.payment-result-immersive .purchase-homepage-header,
  body.payment-result-immersive .purchase-homepage-footer {
    display: none;
  }
}