html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* Base fill so there's never a stray white edge around the frame. */
  background: var(--color-brand, #70836e);
  overflow-x: hidden; /* safety net against any 1px sub-pixel overflow */
}


.main-container {
  width: auto;
  height: auto;
  margin: 0 auto;
  background: var(--color-brand, #70836e);
}

.mobile-main-english {
  width: var(--card-width, 375px);
  height: auto;
  margin: 0 auto;
  padding-top: var(--header-height, 71px);
  padding-bottom: 0;
  /* Grows/shrinks with --page-scale (see variables.css) so the
     card fills wider phones (iPhone 15/16 Pro Max etc.) instead
     of staying frozen at 375px with background bars on the
     sides. transform-origin is top-center so the top of the
     page stays put while it scales. */
  transform: scale(var(--page-scale, 1));
  transform-origin: top center;
  /* transform doesn't affect layout flow, so a scaled box still
     only reserves its *unscaled* height below it. This margin
     compensates: shrinks the gap when scale < 1 (old small-phone
     case), and adds room when scale > 1 (new wide-phone case) so
     nothing overlaps the footer content. */
  margin-bottom: calc(
    var(--card-natural-height, 3884px) * (var(--page-scale, 1) - 1)
  );
}