/* Keep Safari safe areas on the native page canvas.
   A fixed top sampler paints across content below the iPhone status bar. */
html {
  color-scheme: only light;
  background-color: var(--safari-canvas-color, #f6f4f0);
}
body { min-height: 100svh; }
footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
dialog { max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px); }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* The same preview is available in the footer. No fixed badge at the chin. */
  .preview-badge { display: none; }
  .header {
    height: calc(103px + env(safe-area-inset-top, 0px));
    padding-top: calc(25px + env(safe-area-inset-top, 0px));
    padding-left: max(35px, env(safe-area-inset-left, 0px));
    padding-right: max(35px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 760px) {
  .header {
    height: calc(80px + env(safe-area-inset-top, 0px));
    padding-top: calc(17px + env(safe-area-inset-top, 0px));
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
  .course-story:not(.is-static) .course-sticky {
    padding-top: max(13px, calc(env(safe-area-inset-top, 0px) + 4px));
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 4px));
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hero-content, .section:not(.course-story), footer, .flow-wrap,
  .course-sticky, .finish-wrap {
    padding-left: max(35px, calc(env(safe-area-inset-left, 0px) + 12px));
    padding-right: max(35px, calc(env(safe-area-inset-right, 0px) + 12px));
  }
}