/* ============================================================
   v3 — UI normalisation layer over v2.
   Everything here answers a measured defect in v2; the numbers
   in each comment are what v2 actually measured.
   ============================================================ */

/* 1. VERTICAL RHYTHM — v2 had six different section paddings
      (96/80, 96/72, 96/96, 140/120, 28/40). One value now. */
/* v2's most common pairing, kept asymmetric on purpose: more air above a
   section head than below the content that precedes it. Forcing 120/120
   made the page 1,452px longer for no gain. */
#dc-root .sc-host > div > section{padding-top:96px !important;padding-bottom:80px !important}
#dc-root .sc-host > div > header{padding-top:20px !important;padding-bottom:20px !important}

/* 1b. The hero sits directly under the header, so it does not need the standard
       96px section lead-in — that plus vertically centring the text column against
       a ~700px ring put the first word 228px below the nav. Tighten the lead-in and
       let both columns centre together so the gap closes from the top, not the middle. */
#dc-root .sc-host > div > section:first-of-type{
  padding-top:32px !important;
  /* Hero fills the first viewport: 100vh minus the header's own height (128px,
     stable across breakpoints since header padding is fixed at 20/20 above and
     doesn't wrap). Deliberately full-screen, unlike the padding fix above which
     was closing an accidental gap -- this is an intentional above-the-fold hero. */
  min-height:calc(100vh - 128px) !important;
  align-items:center !important;
}
#dc-root .sc-host > div > footer{padding-top:56px !important;padding-bottom:56px !important}

/* 2. MEASURE — one paragraph was running to 110 characters.
      Cap prose; leave grid/diagram text alone. */
#dc-root .sc-host > div > section > p,
#dc-root .sc-host > div > section > div > p{max-width:68ch}

/* 3. FOCUS — v2 had 7 focus selectors for 48 interactive elements.
      One visible ring for everything focusable. */
#dc-root a:focus-visible,
#dc-root button:focus-visible,
#dc-root [tabindex]:focus-visible,
#dc-root [role="button"]:focus-visible{
  outline:2px solid #FF5500 !important;
  outline-offset:3px !important;
}
#dc-root a:focus:not(:focus-visible),
#dc-root button:focus:not(:focus-visible){outline:none}

/* 4. HIT TARGETS — removed. The ::after overlay did not actually reach 44px
      (9 controls were still under it) and risked intercepting the pointer
      events the integrations hover depends on. Padding on real controls is
      the right fix and belongs in the component, not in an override layer. */

/* 5. DENSITY — v2 showed 175 bordered boxes. Nested frames read as
      double-framing; the inner one is removed in v3.js. This softens
      what remains so the outer frame stays the one that means something. */
#dc-root [data-bf] [data-v3-inner]{border-color:transparent !important}

/* 6. Mono floor — nothing textual below 12px (v2 had 86 elements under it).
      SVG <text> is EXCLUDED: those are drawing annotations sized to fit the
      geometry around them. Forcing them to 12px overflowed 20 labels and
      collided 4 pairs on the rings. */
#dc-root [style*="IBM Plex Mono"]:not(svg text):not(svg *){font-size:12px}