/* ===========================================================================
   DMOS — spacing
   ---------------------------------------------------------------------------
   The build lays sections out on a generous scale: 80px vertical padding rising
   to 128px on large screens, with 56px gaps between a heading and the grid
   under it. That reads as a lot of empty space, especially on phones where the
   padding eats a big share of the viewport.

   These overrides cut the large values by roughly a third and leave the small
   ones alone — gaps under 32px are spacing inside components, not dead space
   between them, and shrinking those makes text feel cramped rather than tight.

   Attribute selectors match Tailwind's class tokens directly, so this file must
   load AFTER the main stylesheet. Same specificity, later source order wins.
   Each responsive variant is overridden inside its own breakpoint, or the ramp
   from mobile to desktop would collapse.

   To dial the whole thing, scale the values here; they are grouped by purpose.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Section padding — the biggest source of empty space
   py-20   80px -> 48px
   py-16   64px -> 40px
   --------------------------------------------------------------------------- */
[class~="py-20"] { padding-top: 3rem; padding-bottom: 3rem; }
[class~="py-16"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }

@media (min-width: 640px) {
  /* sm:py-28  112px -> 64px    sm:py-20  80px -> 48px */
  [class~="sm:py-28"] { padding-top: 4rem; padding-bottom: 4rem; }
  [class~="sm:py-20"] { padding-top: 3rem; padding-bottom: 3rem; }
}

@media (min-width: 1024px) {
  /* lg:py-32  128px -> 76px */
  [class~="lg:py-32"] { padding-top: 4.75rem; padding-bottom: 4.75rem; }
}

/* ---------------------------------------------------------------------------
   Gap between a section heading and the content below it
   mt-14  56px -> 36px      mt-12  48px -> 32px      mt-10  40px -> 28px
   --------------------------------------------------------------------------- */
[class~="mt-14"] { margin-top: 2.25rem; }
[class~="mt-12"] { margin-top: 2rem; }
[class~="mt-10"] { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------------
   Grid gutters
   gap-14  56px -> 36px      gap-10  40px -> 28px
   --------------------------------------------------------------------------- */
[class~="gap-14"] { gap: 2.25rem; }
[class~="gap-10"] { gap: 1.75rem; }

/* ---------------------------------------------------------------------------
   Card interiors
   p-8  32px -> 24px        p-7  28px -> 22px
   Held to a modest trim: below about 20px the text starts to crowd the card
   edge, which looks like a mistake rather than a tighter layout.
   --------------------------------------------------------------------------- */
[class~="p-8"] { padding: 1.5rem; }
[class~="p-7"] { padding: 1.375rem; }