/* ============ Breakpoints — HOUSE RULE ============
   TWO tiers only: MOBILE (≤ 640px) and DESKTOP (> 640px). There is
   deliberately NO tablet tier — tablets get the desktop layout; the fluid
   headline tokens (tokens/typography.css) scale it down smoothly.

   CSS custom properties cannot appear inside @media conditions, so the
   breakpoint is written literally. THE one canonical query — copy verbatim:

     @media (max-width: 640px) { … }

   Author desktop-first: base styles are the desktop design, mobile overrides
   live inside the query above (every component css in this system follows
   this).

   What changes on mobile:
   - Headlines/display numbers do NOT step — they are fluid clamp() tokens and
     shrink continuously with the viewport (H1 64→40, H2 48→32, display 100→48).
   - Body text STEPS once at the breakpoint (XXL/XL→18, L→16; base 14 & M 16
     unchanged) — tokens/typography.css.
   - Section rhythm/insets step: --padding-x 60→20, --padding-big 140→80,
     --padding-xxl 100→64 — tokens/spacing.css.
   - Card collections (Blog/Testimonial grids) become horizontal SWIPE
     CAROUSELS — .ds-cardrow, components/core/cardrow.css. EXCEPTION: pricing
     plan cards STACK into one column (top → bottom scroll) so plans stay
     comparable; card rhythm also tightens.
   - Sections stay full-width single-column stacks in source order.
   - The corner house rule has NO mobile exception: sections square-edged,
     cards/bento 24px, images 24/12px.
   - NavBar: intentionally NOT covered here — its mobile version is built
     directly in the website, outside this design system. */
:root {
  --breakpoint-mobile: 640px; /* documentation only — cannot be used in @media */
}