/* ============================================================
   ADDITION BEYOND THE DESIGN KIT — read this.
   The handoff coaching-website kit is desktop-only (flagged in
   the design system's chat2.md audit). The copied source files
   (colors_and_type.css, site.css) are kept verbatim/pristine.
   This file is the ONLY net-new layer: a restrained responsive
   pass + the kit README's "smooth-scroll nav" behavior.
   No new colors, radii, or shadows — layout collapse only,
   using the existing --dk-* tokens.
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Accordion: bodies are in the DOM (static), shown only when open.
   The React kit conditionally rendered these; we match the visual. */
.dk-approach__step:not(.is-open) .dk-approach__body { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .dk-shell, .dk-nav { padding-left: 32px; padding-right: 32px; }
  .dk-section, .dk-hero, .dk-footer { padding-left: 32px; padding-right: 32px; }
  .dk-approach > * { padding-left: 32px; padding-right: 32px; }
  .dk-section { padding-top: 88px; padding-bottom: 88px; }
  .dk-hero { padding-top: 88px; padding-bottom: 64px; }
  .dk-email__inner { grid-template-columns: 1fr; gap: 40px; }
  .dk-approach__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .dk-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---------- mobile ---------- */
@media (max-width: 680px) {
  .dk-shell, .dk-nav { padding-left: 20px; padding-right: 20px; }
  .dk-section, .dk-hero, .dk-footer { padding-left: 20px; padding-right: 20px; }
  .dk-approach > * { padding-left: 20px; padding-right: 20px; }
  .dk-section { padding-top: 64px; padding-bottom: 64px; }
  .dk-hero { padding-top: 64px; padding-bottom: 48px; }

  .dk-nav { flex-wrap: wrap; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .dk-nav__links { gap: 18px; flex-wrap: wrap; }

  .dk-hero__meta { grid-template-columns: 1fr; gap: 24px; }
  .dk-vp__grid { grid-template-columns: 1fr; gap: 40px; }
  .dk-diff__head, .dk-diff__row { grid-template-columns: 1fr; gap: 8px; }
  .dk-footer__top { grid-template-columns: 1fr; gap: 36px; }
  .dk-footer__bottom { flex-direction: column; gap: 8px; }
  .dk-approach__body { margin-left: 0; }
  .dk-hero__ctas { margin-bottom: 64px; }
}