/* ==========================================================================
   BRIXVEN — Responsive (global, cross-cutting)
   Loaded LAST so it always wins the cascade for the rules it does contain.

   Deliberate scope note: a component's OWN responsive behaviour (e.g. the
   hero grid collapsing to one column, the pricing cards re-stacking) is
   kept inside that component's own CSS file, right next to the desktop
   layout it's overriding. That's a scalability trade-off, not an omission —
   a global responsive.css that owns every breakpoint for every component
   would mean editing two files every time any section's mobile layout
   changes, which works against "easy to update after launch." This file
   only holds rules that are genuinely global — not owned by any one
   component.
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --text-body: 1rem;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-lg);
  }
}

@media print {
  .navbar, .footer, .page-loader, .toast, [data-nav-toggle] {
    display: none !important;
  }
}