/* Mobile-only fixes for the About section and horizontal overflow (added Nov 2026).
   Scoped to the site's existing mobile breakpoint, so desktop/tablet rendering is unchanged. */
@media screen and (max-width: 500px) {
  /* Bug 1: the 675px-tall About box was centered inside a 60px grid row, so its top half
     (the question buttons) was pushed above the clipping container and hidden/untappable. */
  .secondPageCenterBoxContainer { grid-template-rows: 1fr; }
  /* Bug 2: the box kept its desktop min width (clamp(600px, ...)), wider than the phone. */
  .secondPageCenterBox { width: 100%; height: 100%; }
  /* Bug 3: the buttons row had 0% height; give it its natural height and the answer the rest. */
  .secondPageBlurb { grid-template-rows: auto minmax(0, 1fr); row-gap: 12px; }
  .secondPageBlurbQuestions { gap: 8px; align-items: stretch; }
  .secondPageBlurbQuestion {
    width: calc(50% - 4px);
    height: auto;
    min-height: 34px;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }
}
