/* Responsive rules.
   The site's two-column sections are inline-styled grids (copy left, panel
   right) with no breakpoint, so on a phone they stayed two columns and the copy
   column collapsed to ~150px. Inline styles can only be beaten by !important,
   which is why these carry it — it is the exception, not a pattern to copy. */

@media (max-width: 860px) {
  /* Any deliberate two-column section becomes one column. */
  .dsx-stack {
    /* minmax(0,1fr), never a bare 1fr: 1fr means minmax(auto,1fr), and that
       auto floor is the column's min-content width, which here exceeds the
       phone viewport and clips the copy. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  /* Copy-left/visual-right sections read better with the copy first. */
  .dsx-stack > .dsx-stack__visual {
    order: 2;
  }
}

@media (max-width: 720px) {
  /* The header is one flex row: wordmark, links, action. Below this width the
     three no longer fit, "How it works" wraps to three lines and the action
     button is pushed off-screen — which widens the document and drags the hero
     copy off with it. Wrap the links onto their own full-width second row. */
  .ds-nav {
    flex-wrap: wrap;
    row-gap: 12px !important;
    column-gap: 12px !important;
  }
  .ds-nav > :first-child { order: 1; }        /* wordmark */
  .ds-nav > .ds-btn { order: 2; margin-left: auto; }
  .ds-nav__links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 14px !important;
  }
}

@media (max-width: 600px) {
  :root {
    /* Packed display type needs to breathe at phone widths. */
    --leading-display: 0.98;
  }
}