/* Global styles from the design handoff (the rest is inline in index.html,
   kept verbatim from the reference so the page stays pixel-faithful). */
html, body { overflow-x: clip; }
/* Anchor offset for the sticky header comes from each section's own
   scroll-margin-top (inline, from the design) — no scroll-padding here, or the
   two add up. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #ffffff;
  color: #37352f;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #37352f; text-decoration: underline; text-decoration-color: rgba(55, 53, 47, 0.4); text-underline-offset: 3px; }
a:hover { color: #2383e2; text-decoration-color: #2383e2; }
a:focus-visible, button:focus-visible { outline: 2px solid #2383e2; outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(35, 131, 226, 0.22); }

/* "Install the App" button hover (style-hover in the reference) */
a.btn-install:hover { background: #0b6bcb !important; color: #ffffff !important; }

/* Phone header: the five nav items need ~410px and don't fit on one line,
   so row 1 is the logo with "Install the App" on the right, and row 2 holds
   Forecast / Growth levers / Agent / Support, starting from the left.
   (The design's wrapping layout produced three rows, links pushed right.) */
.nav-support-mobile { display: none; }
@media (max-width: 940px) {
  .site-nav { padding: 10px 16px !important; gap: 8px 10px !important; }
  .nav-logo { gap: 8px !important; min-width: 0; }
  .nav-logo img { width: 28px !important; height: 28px !important; }
  .nav-logo span { font-size: clamp(14px, 4vw, 18px) !important; white-space: nowrap; }
  .nav-right { order: 1; margin-left: auto; }
  .nav-right .nav-support { display: none; }
  .btn-install { font-size: 13px !important; padding: 6px 10px !important; white-space: nowrap; }
  .nav-links { order: 2; flex-basis: 100%; margin-left: 0 !important; gap: 16px !important; flex-wrap: nowrap !important; }
  .nav-links a { white-space: nowrap; }
  .nav-support-mobile { display: inline; }
  section[id] { scroll-margin-top: 92px !important; }
}