/* ── Wide screens ────────────────────────────────────────────────────────────
   The layout was drawn against a 1440px-wide screen, where the 1200px content
   column fills ~83% of the window. Because every wrapper below is a fixed
   pixel width, a larger monitor does not scale the design — it just parks the
   same 1200px block in the middle and leaves the extra space blank. On a 16"
   MacBook Pro (1728px) that is 264px of emptiness down each side.

   Each rule below restates the wrapper's width as the SAME PERCENTAGE of the
   window it occupies at 1440px, so a bigger screen shows the identical layout,
   simply larger — rather than the same layout stranded in a wider frame.

       .container              1200 / 1440 = 83.33%
       .hero-content           1400 / 1440 = 97.22%
       .free-offer-inner       1140 / 1440 = 79.17%

   Nothing here applies at or below 1440px, so screens that already look right
   are untouched. The px caps stop ultra-wide monitors from stretching text to
   unreadable line lengths.

   Loaded last in base.html so it wins over the page-level stylesheets. */

@media (min-width: 1441px) {

    .container,
    .ai-platform-grid,
    .ecosystem-container {
        max-width: min(83.33vw, 1600px);
    }

    .hero-content,
    .video-showcase-container {
        max-width: min(97.22vw, 1870px);
    }

    .free-offer-inner {
        max-width: min(79.17vw, 1520px);
    }
}