/* Docket Practice Management — marketing site
   Self-contained styles. Fonts: Inter (UI/body), Playfair Display (serif accent),
   JetBrains Mono (labels/eyebrows). Loaded from Google Fonts.
   Palette (inline on elements): ink navy #12263A · paper #FAF7F0 · ledger green #1F7A5C
   · red pencil #C0392B. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; background: #FAF7F0; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; color: #12263A; }
img { max-width: 100%; height: auto; }

/* Header nav links — subtle hover the runtime used to add */
.dk-nav a { transition: color .15s ease; }
.dk-nav a:hover { color: #12263A; }

/* Primary green CTA buttons/links — hover brighten, active nudge */
.dk-cta { transition: filter .15s ease, transform .05s ease; }
.dk-cta:hover { filter: brightness(.96); }
.dk-cta:active { transform: translateY(1px); }

/* Footer links */
.dk-foot a { transition: color .15s ease; }
.dk-foot a:hover { color: #FAF7F0; }

/* Contact form fields — focus ring (was style-focus on the elements) */
.dk-field { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.dk-field:focus {
  border-color: #1F7A5C;
  box-shadow: 0 0 0 3px rgba(31,122,92,.14);
  background: #fff;
  outline: none;
}

/* rise animation used by the hero demo board */
@keyframes dkRise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

/* Responsive: collapse the wide two-column / three-column grids on small screens.
   The design is desktop-first (1280px canvas); this keeps it usable on mobile
   without altering the desktop appearance. */
@media (max-width: 900px) {
  .dk-hero-grid,
  .dk-two-col,
  .dk-three-col,
  .dk-feature-row,
  .dk-partner-grid { grid-template-columns: 1fr !important; }
  .dk-feature-row .dk-order1,
  .dk-feature-row .dk-order2 { order: 0 !important; }
  .dk-nav-links { display: none !important; }
  .dk-platform-banner { flex-direction: column !important; align-items: flex-start !important; }
}