* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #08090b; color: #e6e7ea; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: #35c46f; text-decoration: none; }
  a:hover { color: #6ddc97; }
  @keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
  @keyframes pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
  ::selection { background: #35c46f; color: #08090b; }

  /* ============================================================
   * Mobile responsiveness. The markup is inline-styled (dc-runtime
   * template) and the browser normalizes those inline styles once
   * parsed (rgba()->rgb(), ".85fr"->"0.85fr", ".04em"->"0.04em"),
   * so attribute selectors below match on INTEGER pixel/value
   * substrings only — never on decimals or color functions, which
   * silently fail to match post-normalization. Layout structure/JS
   * is untouched — sizing and stacking only.
   * ==========================================================*/
  @media (max-width: 900px) {
    div[style*="grid-template-columns: repeat(3, 1fr); gap: 16px"],
    div[style*="grid-template-columns: repeat(3, 1fr); gap: 34px 44px"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media (max-width: 720px) {
    nav[style*="height: 58px"] {
      height: auto !important;
      flex-wrap: wrap !important;
      row-gap: 10px !important;
      padding: 12px 16px !important;
    }
    nav[style*="height: 58px"] > span {
      display: none !important;
    }
    nav[style*="height: 58px"] > div[style*="margin-left: auto"] {
      margin-left: 0 !important;
      width: 100% !important;
      flex-wrap: wrap !important;
      gap: 14px !important;
    }

    section[style*="padding: 110px 28px 200px"] { padding: 64px 18px 96px !important; }
    section[style*="padding: 110px 28px"] { padding: 64px 18px !important; }
    div[style*="padding: 120px 28px 80px"] { padding: 96px 18px 56px !important; }

    div[style*="grid-template-columns: 1"][style*="fr"][style*="gap: 56px"] {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    div[style*="grid-template-columns: repeat(3, 1fr); gap: 16px"],
    div[style*="grid-template-columns: repeat(3, 1fr); gap: 34px 44px"],
    div[style*="grid-template-columns: 1fr 1fr; gap: 16px"],
    div[style*="grid-template-columns: repeat(4, 1fr); gap: 1px"] {
      grid-template-columns: 1fr !important;
    }

    div[style*="padding-top: 6px"] { flex-wrap: wrap !important; }

    h1[style*="font-size: 68px"] { font-size: 36px !important; max-width: none !important; }
    h2[style*="font-size: 42px"] { font-size: 26px !important; }
    h2[style*="font-size: 52px"] { font-size: 32px !important; }
    p[style*="font-size: 19px"] { font-size: 16px !important; }

    /* Workflow modal: shrink outer padding and inner content padding so the
       panel isn't crushed to a sliver on phone screens. */
    div[style*="z-index: 70"][style*="padding: 40px"] { padding: 10px !important; }
    div[style*="padding: 16px 24px"] { padding: 12px 14px !important; flex-wrap: wrap !important; }
    div[style*="padding: 28px 24px 30px"] { padding: 18px 14px 22px !important; }
    h3[style*="font-size: 32px"] { font-size: 22px !important; }
  }

  @media (max-width: 480px) {
    h1[style*="font-size: 68px"] { font-size: 30px !important; }
    h2[style*="font-size: 42px"] { font-size: 22px !important; }
    h2[style*="font-size: 52px"] { font-size: 26px !important; }
  }