/* ============================================================
   Homepage vertical rhythm — coherent 3-tier system

   What this fixes, and why:

   1) NO TABLET TIER EXISTED. --section was a single flat 96px
      value for every width above 680px — desktop and tablet
      both. Tablet content stacks into one column and gets much
      taller per section, so inheriting desktop's absolute
      padding on top of that made the page unusually long and
      the gaps feel disconnected from the content's own density.
      Adds a real 681–1080px tier at 72px.

   2) TWO FILES DEFINED --section AT THE SAME 680px BREAKPOINT
      with different values (64px in base, 58px in polish),
      silently resolved by load order, never a deliberate choice.
      Consolidated to one mobile value: 56px.

   3) THE HERO→NEXT-SECTION GAP IS HALF THE GAP USED EVERYWHERE
      ELSE, AT EVERY BREAKPOINT — not a mobile-only issue. Hero's
      bottom padding was hard-set to 0, so hero→thesis measured
      96px while every other section-to-section transition
      measured 192px (desktop), and the same ~50% shortfall
      repeats at tablet and mobile. Hero's bottom padding now
      matches --section like every other section, so the gap
      language is consistent across the whole page.

   4) CLOSING SECTIONS (final CTA, footer) had three unrelated,
      unscaled padding values (60/56, 48/44, 34/34) that never
      responded to viewport the way the rest of the page does.
      Replaced with a second, deliberately tighter scale
      (--section-tight) that still steps down by breakpoint.
   ============================================================ */

:root{
  --section: 96px;
  --section-tight: 60px;
  --section-footer: 40px;
}

@media (max-width:1080px) and (min-width:681px){
  :root{
    --section: 72px;
    --section-tight: 48px;
    --section-footer: 34px;
  }
}

@media (max-width:680px){
  :root{
    --section: 56px;
    --section-tight: 40px;
    --section-footer: 28px;
  }
}

/* Every section now shares one rhythm variable — no more per-file
   conflicts, no more silent overrides deciding the real value. */
.section{ padding:var(--section) 0 !important; }

/* Hero's TOP padding is intentionally its own (extra breathing room
   under the nav); only its bottom is brought in line with the rest
   of the page's gap language. */
.hero{ padding-bottom:var(--section) !important; }

/* signal-field must always hug the hero's real bottom edge, whatever
   the hero's total height/padding ends up being. It was positioned
   in normal flow with a fixed margin-top, which only lined up with
   the old (shorter) hero. Anchoring it to the hero's bottom instead
   means it always meets the next section cleanly, with no exposed
   gap of mismatched background. */
.hero{ position:relative; }
.signal-field{
  position:absolute !important;
  left:0; right:0; bottom:0;
  margin-top:0 !important;
}

/* Grids that go side-by-side on desktop but stack to a single column
   on tablet/mobile kept their desktop column-gap as the row-gap once
   stacked — too tight, and read as unrelated to the rest of the
   page's rhythm. This gap should be roughly consistent with real
   section-to-section spacing, not a separate smaller scale — so it
   uses --section directly rather than its own bespoke number. */
@media (max-width:1080px){
  .diag-grid{ row-gap:var(--section); }
  .score-layout{ row-gap:var(--section); }
}

/* Closing sections get the tighter, still-responsive scale instead
   of three unrelated fixed numbers. */
.hm-home-cta{ padding:var(--section-tight) 0 !important; }
footer{ padding-top:var(--section-footer) !important; padding-bottom:var(--section-footer) !important; }

/* hero-grid still uses its own small gap (clamp 30–46px) for the
   space between the hero text block and the console once they
   stack. Bringing that in line with the same "match --section"
   principle already applied above. !important is needed here
   specifically because the existing tablet hero block ("v35 —
   tablet homepage hero", in base-v17-4.css) sets this same
   property with !important, and this must win over it. */
@media (max-width:1080px){
  .hero-grid{ gap:var(--section) !important; }
}

/* Three more grids with the same latent issue: .case-grid is the
   worst (gap:0 on desktop, so stacked panels touch with only a 1px
   divider line), .thesis-card and .proof-grid both sit meaningfully
   under the page's real section rhythm once stacked. Same fix,
   for one consistent, predictable gap language across the whole
   page. */
@media (max-width:1080px){
  .case-grid{ row-gap:var(--section); }
  .thesis-card{ row-gap:var(--section); }
  .proof-grid{ row-gap:var(--section); }
}

/* Repeating card grids (4 pricing tiers, 4 proof stats, 8 audit
   dimensions, 4 case-study points) wrap to 2 or 1 columns at
   narrower widths but keep their desktop gap (12–16px) as the
   row-gap too — cards nearly touch. These are NOT two distinct
   panels like the fixes above, so they don't get the full
   --section treatment (disproportionate for a row of small
   cards) — a smaller, still-generous, uniform bump instead. */
@media (max-width:1080px){
  .offers{ row-gap:28px; }
  .metrics{ row-gap:28px; }
  .audit-grid{ row-gap:28px; }
  .case-points{ row-gap:28px; }
}